博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
springBoot+ vue+ Element-ui实现合并多图上传(一次请求多张图片)
阅读量:7155 次
发布时间:2019-06-29

本文共 1366 字,大约阅读时间需要 4 分钟。

这次上传使用的是的uoload上传组件,组件预留的钩子回调还是比较充足的。

1:  实现多图上传主要用到以下两个属性:

 

下面讲一下属性使用:

 

默认情况下会请求多次 , 如果加上 :http-request="uploadFile"  只会请求一次

在上传事件触发后,多图上传的默认实现调用了三次POST请求。

题主的需求正好需要的是多图一次上传,并且还要附带一些基础表单信息。

思路就是使用H5的FormData对象模拟表单上传:

    1. 修改:auto-upload="false"属性为false,阻止组件的自动上传
    2. new FormData()创建创建FormData对象
    3. FormData对象设置文件,并把FormData作为参数发送到后台(后台是java实现)

 

 

前台代码:

提交上传

在组件标签上设置:auto-upload="false"阻止自动上传为手动上传

修改 :http-request="uploadFile"覆盖组件的默认上传方法

 

new Vue({ el: '#app', data: { multiple:true, formDate:"" }, mounted: function () { }, methods: { uploadFile(file){ this.formDate.append('file', file.file); }, subPicForm(){ this.formDate = new FormData() this.$refs.upload.submit(); this.formDate.append('WS_CODE', "12133"); let config = { headers: { 'Content-Type': 'multipart/form-data' } } axios.post("your URL", this.formDate,config).then( res => { console.log(res) }).catch( res => { console.log(res) }) } } })

注意uploadFile()方法,这是我们覆盖的上传方法。我猜测在我们触发开始上传文件事件(this.$refs.upload.submit())后,组件会遍历当前文件列表的的文件,并调用上传(uploadFile())方法,在(uploadFile())方法里会传入一个file参数:

红色方框就是我们要的每个file文件。

现在思路清晰了,只要在每次调用uploadFile()方法里把遍历到的文件append()FormData里面,然后再在上传按钮的事件里将“装载”好的FormData对象作为参数发送到服务端就好了,

表单数据也是一样的append操作,下面是后台的java代码:

 参考:

https://segmentfault.com/a/1190000015834181

 

转载于:https://www.cnblogs.com/dw3306/p/10672650.html

你可能感兴趣的文章
香港药品 ref
查看>>
spring学习总结一----控制反转与依赖注入
查看>>
健康日志7-11
查看>>
模式匹配之尺度空间---scale space
查看>>
makefile编写---单个子目录编译自动变量模板ok
查看>>
MBR (主引导记录)
查看>>
win10汇编环境的搭建
查看>>
周末学习记录(摘抄为主)
查看>>
智能ERP 交接班统计异常的解决方法
查看>>
UnityWebSocket
查看>>
仿手机长按事件
查看>>
JXJJOI2018_三题
查看>>
关于未来房价
查看>>
Android开发, 引入jar包到 Android Private Libraries方法
查看>>
CSS3 实现的一个简单的"动态主菜单" 示例[转]
查看>>
Hibernate使用详解(一)
查看>>
Angular Cli 创建并且运行项目
查看>>
《几何与代数导引》例2.7.2
查看>>
Synplify 使用过程中最常用的选项及命令的介绍
查看>>
创建带属性的XML文档
查看>>