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中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 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
星际玩家的三大定律
2020/03/04 星际争霸
PHP Document 代码注释规范
2009/04/13 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python如何生成树形图案
2018/01/03 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python算法题 链表反转详解
2019/07/02 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
财务简历的自我评价
2014/03/05 职场文书
英文演讲稿
2014/05/15 职场文书
公司经理任命书
2014/06/05 职场文书
步步惊心观后感
2015/06/12 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python