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

    },
posted @ 2023-05-09 17:24  LALAYU  阅读(867)  评论(0编辑  收藏  举报