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

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

时间:2024-10-17 08:50:29浏览次数:6  
标签:1024 Vue return uploadGoOn file 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('请上传图片');
		  // 这里默认是true uploadGoOn: true,
          this.uploadGoOn = false;
          return false;
          // return new Promise(() => {})
        }

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

        // 默认为0
        if(this.imgSize === "0"){
          const isLt30m = file.size / 1024 / 1024 < 30
          if (!isLt30m) {
            this.$message.warning('请确保上传的文件小于30MB!');
            this.uploadGoOn = false;
            return false;
            // return new Promise(() => {})
          }
        }else {
          const isLt30m = file.size / 1024 / 1024 < parseInt(this.imgSize)
          if (!isLt30m) {
            this.$message.warning('请确保上传的文件小于10MB!');
            this.uploadGoOn = false;
            return false;
            // return new Promise(() => {})
          }
        }

      },
	  
	  // 重点是这个方法  根据状态进行判断
      async  handleChange(info) {
        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

标签:1024,Vue,return,uploadGoOn,file,false,上传
From: https://www.cnblogs.com/longyoudahai/p/18471313

相关文章

  • 【Vue】Vue2(11)
    文章目录1vuex1.1概念1.2什么时候使用Vuex1.3工作原理图1.4vuex核心概念和API1.4.1state1.4.2actions1.4.3mutations1.4.4getters2求和案例_纯vue版2.1静态页面2.2Count.vue2.3App.vue2.4main.js3求和案例_vuex3.1Count.vue3.2store文件夹下:index......
  • 基于SpringBoot+Vue+uniapp的互助学习小程序的详细设计和实现(源码+lw+部署文档+讲解
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • mysql的时间在vue中显示相差8个小时 (Vue+Django+MySQL 时区 自动转换时间)
    mysql的时间在vue中显示相差8个小时 Vue     10:00:00Django (USE_TZ=True,Django会自动根据所设的时区对时间进行转换;改为False即可)MySQL  2:00:00 =========================原因:中间某个环节的时区不对. 我这里是mysql的时区不对.解决办法:......
  • 基于Java+Springboot+Vue开发的健身房管理系统
    项目简介该项目是基于Java+Springboot+Vue开发的健身房管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的健身房管理系统项目,大学生可以在实践中学习和提升......
  • 前端文件上传的实现方式
        目录一、使用Vue实现文件上传1.安装依赖(如果使用VueCLI创建的项目,可能已经包含所需依赖):2.创建Vue组件:二、使用JQuery实现文件上传1.创建HTML结构:  2.引入JQuery:3.添加JavaScript代码:前端开发过程中,经常遇到要开发文件上传的功能。在此介绍下通过V......
  • 基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
    前言今天大姚给大家分享一款基于.NET8+Vue/UniApp前后端分离的快速开发框架,开箱即用:ZR.Admin.NET。开源免费(基于MITLicense开源协议)、代码量少、学习简单、通俗易懂、功能强大、易扩展、轻量级,让web开发更快速、简单高效(从此告别996),解决70%的重复工作,专注您的业务,轻松开......
  • springboot+vue基于SpringBoot的音乐演出购票系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景在当今数字化时代,音乐演出已经成为人们休闲娱乐的重要组成部分,它不仅丰富了人们的精神生活,还促进了音乐文化的交流与传播。然而,传统的购票方式,如现场购票或通过电话订票,已难以满足日益增长的观众需求。观众在购票过程中常常面临信息不......
  • 初探Vue2:基础概念与实践指南
    通过记录自己在学习Vue2的过程中的实践经历,复盘项目中的技术应用,巩固Vue2的知识要点,并分享职场中的感悟和心得Vue2简介定义Vue.js,简称Vue,是一个渐进式JavaScript框架,它专注于构建用户界面,易于上手的同时,也能在复杂的应用场景中发挥强大的功能。特点Vue2的核心特点包括:响......
  • Vue详细入门(语法【二】)
    今天的学习目标!!!el挂载点data数据对象Vue实例生命周期1.beforeCreate2.created3.beforeMount4.mounted5.beforeUpdate6.updated7.beforeDestroy8.destroyed  在前面Vue详细入门(语法【一】)当中我们学习了什么是Vue,Vue是怎么使用的嘞,Vue有哪些指令,它的核心语......
  • 【开题报告+论文+源码】基于SpringBoot+Vue的学生成绩管理系统
    项目背景与意义在当今社会,科技的迅猛发展和互联网的广泛应用为各种领域的创新与发展提供了广阔的空间。特别是IT软件信息技术的崛起,已经成为连接买卖双方、推动商业活动高效进行的重要力量。电子商务不仅通过技术手段实现了交易的便捷化,还打破了地域和时间的限制,为全球范围内......