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

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

1
before-upload为false的时候会阻止图片的上传 但是和chenge事情一起不行 可以:http-request="fnUploadRequest"
1
2
3
4
5
<el-upload
            --snip--
            :before-upload="beforeAvatarUpload"
            --snip--
  </el-upload>

  

但是发现,使用了async关键字后,直接返回false,也显示的是上传成功:

1
2
3
methods:{
    async beforeAvatarUpload(file){ return false;}
 }

  

  原因解析如下:

1
2
3
async的原理就是返回promise了,如果结果是truefalse,转换成promise后,
promise的状态为fulfilled,结果为false而已。那么仍然得到的是Promise.resolve方法一样。
所以这时候即便为false。仍然可以执行上传操作。
以下能解决异步:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 @   LALAYU  阅读(927)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
历史上的今天:
2020-05-09 FormData上传文件
点击右上角即可分享
微信分享提示