一个页面中经常会有新增、编辑功能,新增、编辑都有上传功能,又不想每个上传功能都写一个beforeUpload方法,该如何处理,请直接看代码。如果各位有更简便的处理方法,麻烦留言告知,让我也学习学习。
<Upload
@click.native="handlePostData('addForm', 'thumb')"
:action="uploadUri"
:show-upload-list="false"
:on-success="handleSuccess"
:format="['jpg', 'jpeg', 'png']"
:max-size="5120"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
>
<Button icon="ios-cloud-upload-outline" type="primary"
>上传背景图片</Button
>
</Upload>
handlePostData(formName, propsName) {
this.postData = {};
this.postData[formName] = propsName;
console.log(this.postData);
},
handleSuccess(res, file, value) {
let key1 = Object.keys(this.postData)[0];
let value1 = Object.values(this.postData)[0];
let { data } = res;
// this[key1][value1] = data.uri;
if (value1 === 'details') {
this[key1][value1] = this[key1][value1] + `<img src="${data.uri}"/>`;
} else {
this[key1][value1] = data.uri;
}
},
handleMaxSize(file) {
this.$Message.error(file.name + '文件太大,不能超过5M哟!');
return false;
},
handleFormatError(file) {
this.$Message.error(file.name + '格式不正确,只能上传jpeg/png格式哟!');
return false;
},
handleBeforeUpload(file) {},
就是通过加一个原生事件,去修改指定表单的指定属性去处理。如果各位有更好的办法,欢迎讨论。谢谢大家!
补充一下:手动上传办法
/***
* @desc 手动上传设置
*/
handleBeforeUpload(file) {
let fileName = file.name;
var suffix = fileName.substr(fileName.lastIndexOf('.'));
if (suffix != '.fmu') {
this.$Message.error('非fmu格式的文件,请重新选择!');
return false;
}
this.defaultFileList.length = 0;
this.uploadFile = file;
this.addModelForm['FMU_file'] = file;
let reader = new FileReader();
reader.readAsDataURL(file);
let self = this;
reader.onloadend = function(e) {
file.url = reader.result;
let fileObj = {
name: file.name,
url: file.url
};
self.defaultFileList.push(fileObj);
self.$refs.addModelFormRef.validateField('FMU_file');
// self.defaultFileList[0].name = file.name;
// self.defaultFileList[0].url = file.url;
};
return false;
},