ant-design vue上传 多文件 、单文件上传
ant-design vue上传 多文件 、单文件上传
上传按钮
在data中声明fileList对象用来保存文件数据，本次实验限制上传数量最多为3个，单文件上传方式每次获取 file对象里的file文件即可
// 移除图片handleRemovevideo(file){const index = this.fileList.indexOf(file);const newFileList = this.fileList.slice();newFileList.splice(index, 1);this.fileList = newFileList;},//上传图片之前的校验beforeUploadFilevideo(file) {const { $message } = thisif(this.fileList.length == 3){$message.warn("只能上传3个文件")const newFileList = this.fileList.slice();newFileList.splice(-1, 1);//只取前3个this.fileList = newFileList}else{this.fileList = [...this.fileList, file]}//获得允许上传的文件类型var type = this.$refs.files.$attrs['data-type']//采用遍历方式判断文件类型和大小是否都符合规则，也可以只校验当前文件//const index = this.fileList.indexOf(file); 拿到文件索引之后再判断for (let item of this.fileList) {var exName = item.name.split('.')[1] //获得文件后缀名if(type.indexOf(exName) === -1){//类型不受支持$message.error('请检查文件类型,只允许上传图片文件')const index = this.fileList.indexOf(file);this.fileList.splice(index,1)break;}//判断文件大小if (item.size/1024/1024 > 20) {$message.error('上传文件大小不能超过20MB')break;}item.preview = getBase64(item.originFileObj)}return false;},//上传当前图片,每次校验完毕及时上传，需要使用formData 方式，不然问题可能很多handleChangeVideo(file){const { $message } = thisconst formData = new FormData()formData.append('file', file.file)this.fileList = file.fileListupload(formData).then(res=>{if(res.code == 200){$message.success(res.msg)}else if (res.code == 500){$message.error(res.msg)}else($message.error(res.msg))}).catch(err=>{$message.error(err.message)})},
//上传文件 api ，需要加headers
export function uploadInstrument(parameter) {return axios({headers: { 'Content-Type': 'multipart/form-data' },url: api.upload,method: 'post',data: parameter})
}
后端代码具体上传文件方法自己实现即可
如有不正确或更好的方式，请大家多多指正!!!
ant-design vue上传 多文件 、单文件上传相关推荐
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- Ant Design Vue 如何获form表单里数据 并给 v-decorator绑定的数据重新赋值
最近在用ant design vue 做项目 遇到了 一下坑 比如 v-decorator 可以做数据 绑定 与v-model 不同的是 给 form 表单赋值 v-model 的值是 双向绑定的 如 ...
- Ant design Vue 如何在a-table表格标题/内容上添加一个按钮
项目需求,官网这方面也不讲清楚 需求如下 方法: fields:[ {// title: 啦啦自定义,dataIndex: 'name',scopedSlots: { title: 'Title' } ...
- Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言 这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
- [WebApi]WebApi通过接口上传文件-单文件 多文件上传 文件下载
WebApi通过接口上传文件 单文件上传(ajax,Form表单都适用) 1.html 2.javascript 3.C# Form表单之单文件上传 1.html 2.javascript 3.C# ...
- ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
- 2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
- 2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点 拖拽播放 桌面歌词 mini模式 自定义托盘右键菜单 任务栏缩略图,歌曲操作 音频可视化 自动/手动检查更新 Nedb数据库持久化 自定义安装路径,安装界面美化 浏览器中启动客户端 Travis ...
- chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件 谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
- Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 阿里Ant Desi ...
最新文章
- Python学习之参数（一）
- 线性直接变换方法对摄像机进行标定
- 浏览器获取设备信息_一条命令获取 IE 浏览器保存网站的账号和密码信息
- memset 结构体内指针_数据结构之线性表应用——内存管理
- 数据预处理之归一化/标准化/正则化/零均值化
- arcpy 基于python制作六十进制与十进制互换的工具箱
- python之Linux基础（三）
- 【运量预测】基于matlab BP神经网络公路运量预测【含Matlab源码 413期】
- C++编程实现进程调度算法（FCFS+RR）
- 谷歌浏览器不兼容websocket的wss协议_为什么程序员都喜欢用Chrome浏览器？
- uni-app返回上一级并刷新页面
- WiFi-ESP8266入门http（3-2）网页认证上网-post请求
- 全局数据共享——MobX（微信小程序）
- iphone照片恢复至android,绝招！如何恢复苹果/安卓手机上误删的照片，详细教程奉上！...
- LiveUpdate Adminstrator配置手册
- 3.16下午 阅读P12P18核心词汇 视频阅读王希伟5.12完
- 2020-11-04 prototype
- photoshop博客_在Photoshop中设计优雅的博客布局
- JFrame，JDialog，JLabel，JButton(p228)
- 三国志战略版：天作之合，登庸令群魏延+沮授，官渡之战