element-ui上传组件,before-upload发送异步请求 + Promise
element-ui上传组件,before-upload发送异步请求 + Promise
before-upload为false的时候会阻止图片的上传 但是和chenge事情一起不行 可以:http-request="fnUploadRequest"
<el-upload --snip-- :before-upload="beforeAvatarUpload" --snip-- </el-upload>
但是发现,使用了async关键字后,直接返回false
,也显示的是上传成功:
methods:{ async beforeAvatarUpload(file){ return false;} }
原因解析如下:
async的原理就是返回promise了,如果结果是true和false,转换成promise后, promise的状态为fulfilled,结果为false而已。那么仍然得到的是Promise.resolve方法一样。 所以这时候即便为false。仍然可以执行上传操作。
以下能解决异步:
beforeAvatarUpload(file) { return new Promise((resolve, reject) => { let spaceStatus1; let _this = this getSpaceStatus().then(function (finalResult) { spaceStatus1 = finalResult if (spaceStatus1.space_status != 1 || Number(file.size) > spaceStatus1.space_size) { _this.$message.error('存储空间不足,请联系管理员') reject() } else { } resolve() }) }) },