首页 > 其他分享 >element-ui上传组件,before-upload发送异步请求 + Promise

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

时间:2023-05-09 17:33:46浏览次数:44  
标签:false spaceStatus1 upload element ui Promise 上传 before

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

    },

标签:false,spaceStatus1,upload,element,ui,Promise,上传,before
From: https://www.cnblogs.com/yu412/p/17385762.html

相关文章

  • springboot alibaba druid数据库连接池配置,输出可执行sql
    #数据源配置spring:datasource:type:com.alibaba.druid.pool.DruidDataSourcedruid:#初始连接数initialSize:5#最小连接池数量minIdle:2#最大连接池数量maxActive:50#配置获取连接等待超时的时间......
  • 设置键盘只能输入数字( phoneNumTextField.keyboardType = UIKeyboardTypeNumberPad;)
    //手机号码textFieldphoneNumTextField=[[UITextFieldalloc]initWithFrame:CGRectMake(0,0,[[UIScreenmainScreen]bounds].size.width,40)];UIView*phoneImage=[[UIViewalloc]initWithFrame:CGRectMake(0,0,40,40)];phoneImage.backgroundColor=[U......
  • QUIC在京东直播的应用与实践
    作者:京东零售周凯一.前言与背景国内的互联网直播技术从2005年前后兴起,彼时最具代表性的直播产品是由PPLive创始人姚欣在华中科技大学就读期间发起的校园直播项目PPLive。当时的直播技术用的还是基于windows系统自带的mediaplayer内置的COM组件开发的播放器,采用的是RTSP协议。......
  • ubuntu22.04 部署 stable-diffusion-webui v1.1.0
    anaconda设置anaconda下载地址https://www.anaconda.com/download#downloadsanaconda下载#wgethttps://repo.anaconda.com/archive/Anaconda3-2023.03-1-Linux-x86_64.sh安装anaconda#bashAnaconda3-2023.03-1-Linux-x86_64.sh....Anaconda3willnowbeinstalled......
  • [NSSCTF 2022 Spring Recruit]easy C
    C的源代码,查个壳:一般都是64位,直接双击吧,换个界面,成天看IDA也不好:也是简单的一个异或加密,上个脚本就好了,不多说啥:Des='d`vxbQd'flag=''foriinDes:flag+=chr((ord(i)^2)-1)print(flag)拿到NSSCTF......
  • elementUI 多层结构动态生成el-form及校验
    如题,当整个el-form都是通过多层数据结构循环渲染出来的表单,那么每个el-form-item的prop和el-input、el-select等的v-model也是动态变量填充,怎么样才能内嵌rules校验呢?如下数据结构://form通过initData数据结构进行渲染constinitData=[{channel:'sms',title......
  • arduino 之 json 再测试(key是否存在)
    1.使用containsKey():Stringdo_back(Stringjson){StaticJsonDocument<200>sjdoc;deserializeJson(sjdoc,json);Stringval=sjdoc["hlf"].as<String>();Serial.print("val:");Serial.println(val);Serial.print("sjdoc.contai......
  • HBuilderX启动微信开发者工具报错[error] Error: Fail to open IDE
    报错提示如下: 解决方法:1.使用自己的账号登录。2.在微信开发者平台上申请appid并更改项目中的appid。3.删除项目中微信小程序的appid,这样就能在HBuilderX中启动游客身份的微信开发者工具。  检查其他步骤是否正确:1.打开微信开发者工具,在安全选项里开启服务端口......
  • burpsuite响应乱码中文乱码
    burp响应报文中含有中文时,会出现不显示中文或中文乱码的情况。解决方案,一个是修改字体为中文类型的字体,另一个是修改字符集,使用UTF-8,修改后马上可以看到效果。 ......
  • 【Azure 存储服务】Java Storage SDK 调用 uploadWithResponse 代码示例(询问ChatGTP
    问题描述查看JavaStorageSDK,想找一个 uploadWithResponse 的示例代码,但是通过全网搜索,结果没有任何有帮助的代码。使用最近ChatGPT来寻求答案,得到非常有格式的内容:问:javaazurestorageaccounttouseuploadWithResponse答:TousetheuploadWithResponsemethodw......