Vue+Ant Design of Vue上传文件，并限制上传文件数及限制其类型

upload创建，accept选择上传的类型，file-list上传的数据，remove点击移除文件时的回调，before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传，change改变后的操作。
```
<a-upload accept=".doc,.docx" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" @change="FileListChange"><a-button> <a-icon type="upload" /> 选择文件 </a-button>
</a-upload>
```
data数据
```
data() {return {fileList: [],};
},
```

上传之前的操作

beforeUpload(file) {this.fileList = [...this.fileList, file];return false;
},

点击移除文件时的回调方法

handleRemove(file) {const index = this.fileList.indexOf(file);const newFileList = this.fileList.slice();newFileList.splice(index, 1);this.fileList = newFileList;
}

文件发生改变时

FileListChange(){const { fileList } = this;//限制只上传一个文件，再次上传时则替换(覆盖)以前的文件if (fileList.length > 1) {fileList.splice(0, 1)}// fileType为文件后缀let fileType = fileList[0].name.replace(/.+\./, "")// 文件类型不为doc与docx则上传失败if(fileType!=='doc' && fileType!=='docx'){this.$message.error('请输入正确的文件格式');const newFileList = this.fileList.slice();newFileList.splice(0, 1);this.fileList = newFileList;}
}

Vue+Ant Design of Vue上传文件，并限制上传文件数及限制其类型相关推荐

vue+elementui 同时有上传文件和批量上传文件功能，上传文件或批量上传文件后必须刷新才能再次上传文件
报错描述: 使用element-ui的上传文件组件写一个批量上传和上传文件,但是发现每次上传文件后或者批量上传文件后,不能再次上传文件或者批量上传文件.只有进入页面第一次点击上传文件或者批量上传文件才 ...
Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
ant design vue 树形控件_官宣！vue.ant.design 低调上线
点击右上方,关注开源中国OSC头条号,获取最新技术资讯官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design. 至此,Ant Design 已经全面覆盖了 Reac ...
官宣！vue.ant.design 低调上线
官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design. 至此,Ant Design 已经全面覆盖了 React.Angular.Vue 三大前端框架,向着世界第一好 ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...
ant design of vue分页/layui实现分页
ant design of vue分页官方文档:https://www.antdv.com/components/pagination-cn/ 结果: 代码: <a-paginationv-i ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
基于Ant Design of Vue实现时长组件 duration
最近遇到一个需求,需要一个输入时长的组件,在经过一番寻找后没有合适的,最终自己动手写一个(实现了v-model双向绑定),记录一下,也给小伙伴们提供一个方便. 本示例基于ant design of v ...

Vue+Ant Design of Vue上传文件，并限制上传文件数及限制其类型

Vue+Ant Design of Vue上传文件，并限制上传文件数及限制其类型相关推荐

最新文章

热门文章