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了,如果结果是 true 和 false ,转换成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() }) }) }, |
分类:
vue
, element-ui
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
2020-05-09 FormData上传文件