上传单个图片：
template： <el-form-item label="上传图片" prop="result"> <el-upload v-if="!formList.result" class="upload-demo" action='/api/jsonws/dlapp/add-file-entry' :multiple="false" :auto-upload="true" :before-upload="beforeuplpad" :http-request="uploadFileSuccess" :on-error="handleUploadError" accept=".jpg,.jpeg,.png" > <div class="up-box"> <i class="el-icon-plus avatar-uploader-icon"></i> <span>点击上传图片</span> </div> </el-upload> <div class="up-box" v-if="formList.result"> <i @click.stop="formList.result = ''" class="el-icon-close avatar-uploader-icon" ></i> // formList.result 是字符串 <el-image :preview-src-list="[url + formList.result]" class="up-img" v-if="formList.result" :src="url + formList.result" alt="" ></el-image> </div> </el-form-item> methods:{ /* * 上传之前的回调 * */ beforeuplpad(event) { this.imgType = event.type; let imgSize = Number(event.size / 1024 / 1024); if (imgSize > 100) { this.$message({ message: "文件大小不能超过100M,请重新上传。", type: "warning", }); return false; } }, uploadCert({ data, file }) { uploadFile(file,{fileId:'',itemType:'cert'}).then(res=>{ this.formList.cert = res.data.savePath }) }, /* * 文件上传 * */ uploadFileSuccess({ data, file }) { uploadFile(file,{fileId:'',itemType:'result'}).then(res=>{ this.formList.result = res.data.savePath }) }, /* * 上传失败回调 * */ handleUploadError(err) { this.$message.error(`上传失败[${err}], 请重试`); // Loading.service({ // text: "正在上传文件，请稍后...", // }).close() }, } 标签：el,data,upload,result,file,res,上传,formList,图片 From： https://www.cnblogs.com/zxhh/p/17916533.html