element-ui 中使用upload多文件上传只请求一次接口


Posted in Javascript onJuly 19, 2019

方法一

不使用组件内部的钩子

<el-upload
 class="upload-image"
 ref="upload"
 multiple
 :action="baseUrl"
 list-type="picture"
 :auto-upload="false"
 accept="image/*">
 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
 <div slot="tip">只能上传jpg、png、gif 格式,大小不超过500KB的图片</div>
</el-upload>

js

点击上传服务器的按钮时调用这个函数,也就是说不走upload的钩子,不调用他的方法自己搞

submitUpload () {
   let { uploadFiles } = this.$refs.upload
   let form = new FormData()
   let status = true
   // 在这里对每一张图片进行大小的校验,如果不符合则提示,所有不符合的都提示,校验完成后只要有不符合条件的就不执行下面的操作
   uploadFiles.forEach(item => {
    const size = item.raw.size / 1024 <= 500
    if (!size) {
     this.$message.error(`${item.raw.name}大小超过500KB`)
     status = false
     return
    }
    form.append('image[]', item.raw)
   })
   if (!status) {
    return
   }
   // 符合条件后再将这个FormData对象传递给后端
   //调取接口上传form参数
   
 }

方法二

使用内部的回调去获取对应的

<el-upload
 class="upload-image"
 ref="upload"
 multiple
 :action="baseUrl"
 list-type="picture"
 :auto-upload="false"
 :before-upload="beforeImageUpload"
 :http-request="ImageRequest"
 accept="image/*">
 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
 <div slot="tip">只能上传jpg、png、gif 格式,大小不超过500KB的图片</div>
</el-upload>

js

beforeImageUpload (file) { // 上传文件前的钩子对文件进行校验
  const size = file.size / 1024 < 500
  if (!size) {
   this.$message.error('上传图片大小不能超过 500KB!')
  }
  return size
}

上传前钩子返回false之后给文件就不会再往下执行下面的钩子了

因此在http-request的钩子就不会被执行,在该钩子中获取到的都是通过校验的file文件的信息

ImageRequest (file) {
  this.formData.append('image[]', file.file)
}

此时在这个formData 中的数据就是通过校验的数据

submitUpload () {
  this.formData = new FormData()
  // 手动触发上传
  this.$refs.upload.submit()
  // 此时所有的钩子已经执行完了formData 中存的是通过校验的数据
  // 此时在调用接口上传该数据
}

该方法在使用时不符合条件的文件会自动删除只留下符合条件的

可能是before-upload这个钩子的原因不符合之后他会去调用删除的钩子

因此使用方法一比这个要好很多

该方法节省了我们自己写样式以及预览,组件都帮你干了,你只要写逻辑就好啦

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
js实现导航跟随效果
Nov 17 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 #Javascript
bootstrap table插件动态加载表头
Jul 19 #Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 #Javascript
VueJS 取得 URL 参数值的方法
Jul 19 #Javascript
vue自定义表单生成器form-create使用详解
Jul 19 #Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 #Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Javascript开发包大全整理
2006/12/22 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中关于使用模块的基础知识
2015/05/24 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
波兰在线运动商店:YesSport
2020/07/23 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
linux面试题参考答案(4)
2014/09/21 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
学校花圃的标语
2014/06/18 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Python中22个万用公式的小结
2021/07/21 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server