单张图片上传
<template>
<Upload
style="margin-left:40px;margin-top:10px;"
ref="upload"
:before-upload="beforeImgFile"
:on-success="successImgFile"
:on-error="errorImgFile"
:action="uploadFileUrl"
:accept="Accept"
:format="Format"
:on-format-error="handleFormatError"
:max-size="FileMaxSize"
:on-exceeded-size="handleMaxSize"
:show-upload-list="true"
:data="uploadData"
>
<!-- :headers="headers" -->
<Button icon="ios-cloud-upload-outline" :disabled="this.otherFileArr.length >=10">添加</Button>
</Upload>
<template>
export default {
data() {
return{
uploadFileUrl: axios.defaults.baseURL + "channelData/fileUpload",
file: null,
isShow: false,
isShowTxt: "",
Accept: "pdf,png,jpg,jpeg,doc,docx", //上传文件格式限制
Format: ["pdf", "png", "jpg", "jpeg", "doc", "docx"], //上传文件格式限制
FileMaxSize: 1024 * 20, // 最大Kb
uploadData: {},
headers: { "Content-Type": "application/x-www-form-urlencoded" }
}
}
methods: {
// 判断上传类型是否错误
handleFormatError(file) {
console.log(file);
this.isShowTxt = "*只支持jpg,png格式图片和pdf文件";
this.isShow = true;
},
// 判断文件大小
handleMaxSize(file) {
console.log(file);
this.isShowTxt = "文件不能超过2M";
this.isShow = true;
},
// 图片上传之前
beforeImgFile(e) {
let _this = this;
console.log(e);
this.uploadData = {
orderId: this.id
};
let promise = new Promise(resolve => {
this.$nextTick(function() {
resolve(true);
});
});
return promise;
},
// 上传成功
successImgFile(e) {
console.log(e);
if (e.flag == 1) {
this.getOrderDetail();
this.$refs.upload.clearFiles();
this.isShow = false;
} else {
this.isShowTxt = "上传失败,请从新上传";
this.isShow = true;
}
},
// 上传失败
errorImgFile(e) {
console.log(e);
this.isShowTxt = "上传失败,请从新上传";
this.isShow = true;
},
}