Element-ui实现合并多图上传（一次请求多张图片）

loostudy 发布于2019-08-19 10:51 / 3674人阅读

摘要：实现多图上传主要用到以下两个属性是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求在上传事件触发后，多图上传的默认实现调用了三次请求。

前言

工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。

环境：

Springboot+Vue+Element-ui

正文

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

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

Elemet-ui是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求：

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

题主的需求正好需要的是多图一次上传，并且还要附带一些基础表单信息。
思路就是使用H5的FormData对象模拟表单上传：

修改:auto-upload="false"属性为false，阻止组件的自动上传

new FormData()创建创建FormData对象

向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代码：

@ResponseBody
    @RequestMapping(value = "/testPicUpload", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public String testPicUpload(@RequestParam("file") MultipartFile[] file, String) throws Exception {
        LoggerFactory.getLogger(getClass()).debug("长度"+file.length);
        return "suc";
    }

可以看到后台拿到了我们传上去的三张图：

至此使用element-ui一次多图上传就完成了.

初次发文，如有问题请多指教。

私有云服务器托管实现图片上传 asp实现上传图片 android 实现上传图片多图上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/76584.html

移动端H5实现图片上传

摘要：需求公司现在在移动端使用实现图片上传，但最近需求太奇葩了，插件无法满足我们的经过商讨决定下掉这个插件，使用原生的实现图片上传。首先是有几种常见的移动端图片上传方式通过对象可以组装一组用发送请求的键值对。需求公司现在在移动端使用webuploader实现图片上传，但最近需求太奇葩了，插件无法满足我们的PM经过商讨决定下掉这个插件，使用H5原生的API实现图片上传。 7.3日发布：单张...

WelliJhon 2019-08-05 17:55 评论0 收藏0
feeds流中的图片

摘要：先来看看常见的产品中的流中的布局朋友圈纯客户端的流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。兴趣部落兴趣部落的图片很简单粗暴，之间采用了的方式，不管多图还是单图，统一正方形显示。先来看看常见的产品中的feeds流中的布局： 1、朋友圈纯客户端的feeds流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。大于一张图片则以正方形显示，一共显示9张图，九宫格，多了就不排...

ghnor 2019-08-30 12:56 评论0 收藏0
feeds流中的图片

摘要：先来看看常见的产品中的流中的布局朋友圈纯客户端的流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。兴趣部落兴趣部落的图片很简单粗暴，之间采用了的方式，不管多图还是单图，统一正方形显示。先来看看常见的产品中的feeds流中的布局： 1、朋友圈纯客户端的feeds流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。大于一张图片则以正方形显示，一共显示9张图，九宫格，多了就不排...

LuDongWei 2019-08-19 18:04 评论0 收藏0
基于Node的React图片上传组件实现

摘要：常用的设置如下下的请求风格下的请求和不太一样，在正式的请求发出之前都会先发一个类型为的请求作为试探，只有当该请求通过以后，正式的请求才能发向服务端。所以服务端路由我们还需要处理这样一个请求注意该请求同样需要设置跨域。写在前面红旗不倒，誓把JavaScript进行到底！今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理（React + Node），花了一些时间，希望对...

cfanr 2019-08-20 10:14 评论0 收藏0
基于Node的React图片上传组件实现

摘要：常用的设置如下下的请求风格下的请求和不太一样，在正式的请求发出之前都会先发一个类型为的请求作为试探，只有当该请求通过以后，正式的请求才能发向服务端。所以服务端路由我们还需要处理这样一个请求注意该请求同样需要设置跨域。写在前面红旗不倒，誓把JavaScript进行到底！今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理（React + Node），花了一些时间，希望对...

omgdog 2019-08-05 10:01 评论0 收藏0