<el-upload ref="voucherUpload" action="#" accept="image/jpeg,image/gif,image/png"
:http-request="onUploadImageRequest"
:on-remove="onUploadRemove"
:on-success="onUploadSuccess"
:before-upload="voucherBeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb </div>
</div>
</el-upload>
onUploadSuccess(file, fileList) {
this.payOrderModel.voucherFileList = fileList.map((item) => {
let name = item.response.name,url = item.response.url;
return {name,url};
})
},
onUploadRemove(file, fileList){
this.payOrderModel.voucherFileList = fileList.map((item) => {
let name = item.response.name,url = item.response.url;
return {name,url};
})
},
onUploadImageRequest(param) {
const formData = new FormData()
let fileName = param.file.name;
formData.append('voucher', param.file)
FinanceOrderService.uploadVoucher(formData).then(response => {
this.fileLoading.close();
param.onSuccess({name: fileName, url: response.imgUrl});
}).catch(response => {
param.onError()
this.fileLoading.close();
})
},
voucherBeforeUpload(file) {
const acceptType = ['png','gif','jpg','jpeg']
const FILE_SIZE = 500 * 1000 ;
const maxUploadCount = 2;
if(this.payOrderModel.voucherFileList.length >= maxUploadCount){
this.$message.error(`最多只能上传 ${maxUploadCount} 个文件!`);
return false;
}
let fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
let isImage = acceptType.some((item) => {
return fileExtension.toLowerCase() == item;
})
if (!isImage){
this.$message.error(`文件格式不正确, 请上传 jpg/gif/png 图片格式文件!`);
return false;
}
if(file.size > FILE_SIZE) {
this.$message.error(`上传文件不能超过 500K`);
return false;
}
this.fileLoading = this.$loading({
lock: true,
text: "上传中",
background: "rgba(0, 0, 0, 0.7)",
});
return true;
},