上传单个图片：
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()
},
}