在使用 上传文件组件时, 设置 before-upload 绑定匿名函数,导致上传前的校验返回false后,仍旧上传
:before-upload="(file)=>{return beforeAvatarUpload(item, file)}" //写法一(正确)
:before-upload="(file)=>{ beforeAvatarUpload(item, file)}" //写法二(有问题)
<template>
<vee-upload
class="upload-demo"
name="files"
:action="createFileAction(item)"
:label="item.componentTitle"
:require="item.required == '0'"
:rules="getRules(item,'8')"
v-model="item.actValue"
:errorMessage="item.errorMessage || item.componentTitle"
:show-file-list="false"
:on-success="(res, file, fileList)=>{handleAvatarSuccess(item, res, file, fileList)}"
:on-error="(err, file, fileList)=>{handleAvatarError(item, err, file, fileList)}"
:before-upload="(file)=>{return beforeAvatarUpload(item, file)}"
:disabled="item.isDisable == '1'"
>
<template>
<el-button icon="el-icon-plus">选择文件</el-button>
</template>
</vee-upload>
</template>
methods:{
// 上传校验
beforeAvatarUpload(item, file) {
const fileSize = (item.restrictions - 0) || 10;
const isImageLimit = file.size / 1024 / 1024 < fileSize;
if (isImageLimit) {
this.showFullLoading();
}else{
this.$message.warning(`附件大小不能超过 ${fileSize}MB!`);
}
return isImageLimit; //假如给:before-upload=绑定第二种写法,此处即使强制返回false,仍旧会进入到上传成功方法
},
// 上传成功
handleAvatarSuccess(item, res, file, fileList) {
this.closeFullLoading();
if (res && res.result && res.obj) {
item.actValue = (res.obj.fileName && res.obj.fileName.length > 0 && res.obj.fileName[0]) || '';
this.$set(item, 'fileKey', (res.obj.keys && res.obj.keys.length > 0 && res.obj.keys[0]) || '');
this.$message.success(`上传成功`);
} else {
this.$message.error((res && res.info) || `上传失败,请重新上传`);
}
// fileList = [];
},
}
问题分析:
:before-upload此处使用了匿名函数写法,导致 :before-upload获取不到匿名函数执行完毕的结果,需要把匿名函数执行完成后的结果return给 :before-upload=“”
个人感觉 这个匿名函数可以看作 闭包
function makefunc(x) {
return (function (){
return x+1;
})();
}
alert(makefunc(999));
如果上面的匿名函数执行没有被return 那么在方法makefunc外面是拿不到匿名函数执行的结果的,如下:console打印出来是有结果的,但是alert出来的是
function makefunc(x) {
let AA = (function (){
return x+1;
})();
console.log(AA);
}
alert(makefunc(999));