关于 Ant Design Vue框架中 <a-upload> beforeUpload 上传文件校验之后,返回false 还能上传的问题

现在在(jinsai)外包的时候,使用的是jeecg-boot项目,后端上传使用的是自带的JImageUpload,里面上传是a-upload组件,就是 Ant Design Vue框架,说实话,挺难用的。
在JImageUpload组件中:

直接上代码:

点击查看代码
          // 上传前
      beforeUpload: function(file){
        this.uploadGoOn = true

        const fileType = file.type
        if(fileType.indexOf('image')<0){
          this.$message.warning('请上传图片');
          this.uploadGoOn = false;
          return false;
          // return new Promise(() => {})
        }

        if(file.size===0){
          this.$message.warning('请确保上传的文件大于0MB!')
          this.uploadGoOn = false;
          return false;
        }

        // 不传默认是0,目前只是个人免冠照片设置为10M
        if(this.imgSize !== "0"){
          const isLt = file.size / 1024 / 1024 < parseInt(this.imgSize)
          if (!isLt) {
            // 根据传入大小回显
            this.$message.warning('请确保上传的文件小于'+this.imgSize+'MB!');
            this.uploadGoOn = false;
            return false;
          }
        }else {
          const isLt30m = file.size / 1024 / 1024 < 30
          if (!isLt30m) {
            this.$message.warning('请确保上传的文件小于30MB!');
            this.uploadGoOn = false;
            return false;
          }
        }
      },

      // 文件变化
      async  handleChange(info) {
        // 解决返回false还能上传的问题
        if (!info.file.status && this.uploadGoOn === false) {
          info.fileList.pop()
        }
	  }

之前参考的帖子,但是不是这样实现的,是:return new Promise((resolve, reject) => {}),这样实现的
https://blog.csdn.net/weixin_55846296/article/details/123335595
https://blog.csdn.net/weixin_44647098/article/details/114836752

posted @   Charles博客  阅读(443)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示