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()
})
})
},