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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
javascript实现扫雷简易版
Aug 18 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
如何删除多级目录
2006/10/09 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
Python生成随机数组的方法小结
2017/04/15 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
keras输出预测值和真实值方式
2020/06/27 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
白酒市场开发计划书
2014/01/09 职场文书
规范化管理年活动总结
2014/08/29 职场文书
党课心得体会范文
2014/09/09 职场文书
三方股东合作协议书
2014/10/28 职场文书
产品质量保证书范本
2015/02/27 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
暗恋桃花源观后感
2015/06/12 职场文书