1 Html

??????????<el-form-item?label="圖片"?prop="picUrl"?:label-width="formLabelWidth">

????????????<el-upload

??????????????v-model="form.picUrl"? ? // 表單提交對象

??????????????:action="actionImg"? // 圖片上傳地址,

??????????????list-type="picture-card"

??????????????:on-success="successImg"? //圖片上傳完成的回調(diào)

??????????????auto-upload

??????????????:headers="headers"? // 請求頭

??????????????ref="upload">

??????????????<i?class="el-icon-plus"></i>

????????????</el-upload>

??????????</el-form-item>

2 Js

??//?圖片上傳的?請求頭

??computed:?{

????headers()?{

??????return?{

????????Authorization:?window.sessionStorage.getItem("token")

??????};

????}

??}

????//?圖片上傳完成的回調(diào)

????successImg(response,?file,?fileList)?{

??????if?(response)?{? // 按各自后端需要來寫,圖片數(shù)據(jù)都在response里面

????????this.form.picUrl?=?response.data.url;??

????????this.form.remotePath?=?response.data.remotePath;?

??????}

????},

????// 確定按鈕

? ? addSubmit(from)?{

??????this.$refs[from].validate(async?valid?=>?{

????????if?(valid)?{?

??????????if?(this.form.picUrl?==?"")?{ //判斷圖片有沒有上傳成功

????????????this.$message.error("請選擇圖片");

????????????return?false;

??????????}

??????????//?成功?提交數(shù)據(jù)

??????????let?res?=?await?this.$axios.post("/product/save",?this.form);

??????????if?(res.data.code?!=?0)?{

????????????this.$message.error(res.data.message);

??????????}?else?if?(res.data.code?==?0)?{

????????????this.$message.success("新增成功");

??????????}

????????}

??????});

????},