AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)
AntD上传组件
第一种方式
beforeUpload(file) {
let isLt = true
if (filesSize) {
isLt = file.size / 1024 / 1024 <= filesSize
if (!isLt) {
this.$message.error('文件大小不能超过' + filesSize + 'MB!')
}
} return isLt
}
这种方式写起来快速简单,但是组件中会留下一个可删除交互的上传痕迹,并且未返回响应数据。甚至还可能图片上传这个阶段还是完成了,组件依然发送了upload的http请求,这显然是一个不合理的交互效果。
第二种方式
通过Promise实现相同效果
beforeUpload(file) {
const _this = this
return new Promise(function(resolve, reject) {
if (file.size / 1024 / 1024 > filesSize) {
_this.$message.error(`文件大小不能超过 ${filesSize} MB`)
reject()
} else {
resolve()
}
})
}
这样在判断失败时,图片不会执行上传的任何步骤。
阅读我的另一篇文章,以了解上传图片和视频能做到的多种限制:
AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)
- END -
AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)的更多相关文章
- vue 路由传参 params 与 query两种方式的区别
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: router文件下index.js里面,是这么定义路由的: { p ...
- AspNetCore 文件上传(模型绑定、Ajax) 两种方式 get到了吗?
就目前来说,ASP.NET Core2.1了,已经相当成熟了,希望下个项目争取使用吧!! 上传文件的三种方式("我会的,说不定还有其他方式") 模型绑定 Ajax WebUploa ...
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- iOS 自定义layer的两种方式
在iOS中,你能看得见摸得着的东西基本都是UIView,比如一个按钮,一个标签,一个文本输入框,这些都是UIView: 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层 在创建UIVi ...
- EntityFramework Core 2.0自定义标量函数两种方式
前言 上一节我们讲完原始查询如何防止SQL注入问题同时并提供了几种方式.本节我们继续来讲讲EF Core 2.0中的新特性自定义标量函数. 自定义标量函数两种方式 在EF Core 2.0中我们可以将 ...
- Android手机上监听短信的两种方式
Android手机上监听短信有两种方式: 1. 接受系统的短信广播,操作短信内容. 优点:操作方便,适合简单的短信应用. 缺点:来信会在状态栏显示通知信息. AndroidManifest.xml: ...
- sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')
上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock') <!-- * ...
- upload控件上传json文件合并的两种方法
方法一: byte[] byte1 = FileUpload1.FileBytes; byte[] byte2 = FileUpload2.FileBytes; byte[] a1 = Encodin ...
- 自定义UITabBar的两种方式
开发中,经常会遇到各种各样的奇葩设计要求,因为apple提供的UITabBar样式单一,只是简单的"图片+文字"样式,高度49又不可以改变.自定义UITabBar成为了唯一的出路. ...
随机推荐
- 从零开始学习JAVA(入门基础)
目录 博主从零开始学习JAVA(入门基础) 1.搭建JAVA开发环境 卸载JDK(未安装的请忽略) 安装JDK 2.编程语言中,何为编译型与解释型 编译型 解释型 3.第一个JAVA应用程序 4.JA ...
- 用 Java 实现常见的 8 种内部排序算法
一.插入类排序 插入类排序就是在一个有序的序列中,插入一个新的关键字.从而达到新的有序序列.插入排序一般有直接插入排序.折半插入排序和希尔排序. 1. 插入排序 1.1 直接插入排序 /** * 直接 ...
- go-zero:微服务框架
go-zero 是一个集成了各种工程实践的 Web 和 rpc 框架,它的弹性设计保障了大并发服务端的稳定性,并且已经经过了充分的实战检验. go-zero 在设计时遵循了 "工具大于约定和 ...
- S3C2440—2.裸机开发步骤及工具使用
文章目录 一.裸机开发步骤简介 1.在X86架构的Windows系统中 2.在X86架构的Ubuntu系统中 3.ARM裸机开发 二.soucre insight使用 1.sourec insight ...
- VS+Qt+Halcon——显示图片,实现鼠标缩放、移动图片
摘要 本篇博文记录一下,用VS+Qt+Halcon实现对图片的读取以及鼠标缩放,移动(鼠标事件调用了halcon自带的算子)的过程.以及遇到的坑..... 先来看一下动态效果图: 主要控件: 添加一个 ...
- 深层剖析鸿蒙轻内核M核的动态内存如何支持多段非连续性内存
摘要:鸿蒙轻内核M核新增支持了多段非连续性内存区域,把多个非连续性内存逻辑上合一,用户不感知底层的不同内存块. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列九 动态内存Dynamic Mem ...
- TypeScript 入门指南 【大白话】
前言 聊聊为何要学习TypeScript? 从开发角度来讲, TypeScript 作为强类型语言,对属性有类型约束.在日常开发中少了减少了不必要的因参数类型造成的BUG,当你在使用同事封装好的函数时 ...
- C#的6种常用集合类
一.先来说说数组的不足(也可以说集合与数组的区别): 1.数组是固定大小的,不能伸缩.虽然System.Array.Resize这个泛型方法可以重置数组大小,但是该方法是重新创建新设置大小的数组,用的 ...
- Linux centos 安装 JDK 8
一.下载JDK 官方下载 # 下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...
- win系统打不开CHM文件(例如JDK的API)
打开文件乱码,打开时弹出乱码 前提说明,存放路径不得有中文,文件名也不能有中文 检查下面三个文件: hh.exe文件放置电脑 C:\Windows目录下: hhctrl.ocx ,its ...