el-upload控件一次接口请求上传多个文件
2018-11-02 08:50:12来源:博客园 阅读 ()
el-upload组件默认情况下上传多少个文件就会请求多少次上传接口,如何一次上传多个文件而不必多次请求上传接口呢?直接看代码
html
<el-upload :action="actionUrl" :auto-upload="false" :multiple="true" :file-list="fileList" :on-change="onChange" :on-remove="onRemove" :on-exceed="OnExceed" ref="upload" list-type="picture" :limit="10"> <button>上传附件文档</button> <span>注意:支持jpg,png格式</span> </el-upload>
js
onChange(file, fileList) { //这里做一些文件控制,注意:就算一次选取多个文件,这里依旧会执行多次 const isJPG = file.raw.type === 'image/jpeg'; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); fileList.pop() } let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name) if (existFile) { this.$message.error('当前文件已经存在!'); fileList.pop() } this.fileList = fileList }, onRemove(file, fileList) { this.fileList = fileList }, OnExceed(file, fileList) { this.$message.error(`最多只能上传10张图片!`); }, submitUpload() { //上传函数,如果把提交函数用在http-request钩子中,fileList多长就执行请求多少次接口,依旧是无法做到只请求一次上传多文件 var formData = new FormData(); // 用FormData存放上传文件
this.fileList.forEach(file => {
formData.append('reportFile', file.raw, file.raw.name); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
})
uploadFiles(formData).then(res => { //手动上传貌似无法触发成功或失败的钩子函数,因此这里手动调用
this.onSuccess()
}).catch(err => {
console.log(err)
this.onError()
})
}
一些注意的关键点都已经写在注释了,还有一点需要注意的,如果把el-upload用在el-form内,点击上传的时候回刷新路由,目前还没找到解决办法,以上都是踩的一些小坑,希望对大家有帮助!!!
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- JS 控件事件小结 2020-03-25
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 默认让页面的第一个控件选中的javascript代码 2020-02-20
- 麻雀虽小五脏俱全 Dojo自定义控件应用 2020-02-20
- 使用百度echarts仿雪球分时图(一) 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash