526互联

element-ui上传组件，before-upload发送异步请求 + Promise

发布时间 2023-05-09 17:30:45作者: LALAYU

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

    },