vue element-ui 文件上传
时间:2018-12-10
本文章向大家介绍vue element-ui 文件上传,主要包括vue element-ui 文件上传相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<el-upload class="upload-demo" action="" :before-remove="beforeRemove" :on-remove="onRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :http-request="uploadSectionFile"> <el-button size="small" type="primary">点击上传</el-button> <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> --> </el-upload>
js
接口:
export const uploadFile = params => { return axios.post(`${easykp_config.test}/file/upload`, params, { headers: { 'author-token-key': localStorage.getItem('token') } }).then(res => res.data); };
调用:
//文件上传 handleExceed(files, fileList) { //超出限制 this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); }, beforeRemove(file, fileList) { //确定移除 return this.$confirm(`确定移除 ${ file.name }?`); }, onRemove(file, fileList) { //删除清空 // console.log(file, fileList) this.filesId = []; }, uploadSectionFile(param) { var fileObj = param.file; var formData = new FormData(); formData.append('file', fileObj); // console.log('formData',fileObj.size)可做大小限制等 uploadFile(formData).then((res) => { //请求数据 if (res.code == 200) { this.filesId.push(res.body.id); this.$message.success(`上传成功`); } else { this.$message({ message: res.message, type: 'error' }); } }); }
具体详见官方api,很详细
http://element.eleme.io/#/zh-CN/component/upload#attribute
- 通过单例模式模拟RAC连接 (r4笔记第76天)
- 网站上的验证码是怎么产生的?
- Java基础-17(01)总结,登录注册案例,Set集合,HashSet
- mongoDB初探第一篇(r4笔记第75天)
- 重温快速排序(r4笔记第73天)
- Java基础-17(01)总结,TreeSet,LinkHashSet
- 海量数据迁移之数据抽取流程 (r4笔记第72天)
- CSS Selectors Level 4新特性全面解析
- 巧用外部表避免大量的insert (r4笔记第71天)
- 如何用java语言实现C#中的ref关键字(按引用传递参数)的效果
- 16(01)总结List的子类,ArrayList,Vector,LinkedList
- 16(02)总结泛型
- 基于 React + Webpack 的音乐相册项目(上)
- 16(03)总结增强for循环,静态导入,可变参数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 答应我,用了这个jupyter插件,别再重复造轮子了
- 商业数据分析从入门到入职(9)Python网络数据获取
- 谈一谈还原解包后小程序页面wxss样式的若干方法
- 什么?不使用selenium爬京东评论?你是不是在骗我
- 骚操作,Python操作PPT,你会吗?
- 用了这个jupyter插件,我已经半个月没打开过excel了
- Mística:一款支持任意协议的应用程序通信工具
- 为什么阿里巴巴禁止使用BigDecimal的equals方法做等值比较?
- 原创 | codefroces中的病毒,这题有很深的trick,你能解开吗?
- 原创 | git的远程分支是干啥的,和本地的有什么区别?
- 京东技术主导:全新架构的分布式事务Hmily 2.1.1发布
- iOS音视频接入-TRTC接入前期key、秘钥等准备
- 你一定不知道的 Linux 使用技巧
- 当 Python 爬虫搭配起 Bilibili 唧唧,奇怪的生产力出现了
- 一个简单的小技巧,监控网页所有动态标签创建的调用处