Element-ui向Java服务器一次性发送多个图片

前言

生活举步为艰,时间就像海绵里的水,挤一挤总会有的,不过,精力却是有限的- -。

最近有个需求,需要用Element-ui向后台一次性发送多张图片,并且还要结合一些字符串数据。在之前的SSM通过工具类实现单图片和多input框数据存储到数据库中，我是从HttpServletRequest里面直接取出来的数据,没有用到Spring Mvc的MultipartFile类。这一次想着还按照之前那么做太费劲了,代码也不好维护。所以,就用Spring MVC和element-ui结合做了文件上传。

element-ui框架的文件上传已经做的挺好了,可以通过设置属性添加请求头和除文件以外的请求体,不过,它是一个图片触发一次后台请求,就算你一次性选了5张图,它也会像后台发5次请求。所以只好自己拼了。

实现思路

前台添加一个按钮设置点击事件,当触发点击事件的时候,用formData把所有的图片和其他的请求题拼接一下,一并发送给后台.

后台使用@RequestParam分别接收MultipartFile数组以及其他的请求体。

前端

上传组件如下(.vue):

<el-form-item>
    <el-upload drag ref="testForm" multiple 
        :headers="headers" :data="bodyData"
        :show-file-list="true"
        :auto-upload="false">
        <....省略不必要的部分>
        <el-button @click="submitForm"></el-button>
    </el-upload>
</el-form-item>


<script>
    methods:{
        submitForm(){
            let form = new FormData();
            //从$refs中读取属性,如果不知道该怎么读可以疯狂console.log()打印$refs下面的值,一直                                    
            //到知道怎么拿到file的集合就可以了
            this.$refs.testForm.$children[0].fileList.forEach(function(file){
                //三个参数依次是: @RequestParam中的字符串, 文件对象, 文件的名称(***.png)
                form.append("file", file.raw, file.name);
            })
            //添加其他需要的请求体
            form.append("companyId", "21312312");
            let xhr = new XMLHttpRequest();
            xhr.open("post", "http://localhost:8080/file/fileUpload", true);
            //添加请求头
            let token = sessionStorge.getItem("token");
            xhr.setRequestHeader("token", token)
            let tag = this;
            //声明在发送完成后执行的方法
            xhr.onload = function(){
                ...
                tag.$message.info("上传成功");
            }
            //调用发送方法发送formData
            xhr.send(form);
        }
    }
</script>

后端

SpringMvc配置文件里需要加上一个bean:

<!-- 配置MultipartResovler -->
<bean id="multipartResolver" 
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 配置MultipartResovler -->
    <property name="defaultEncoding" value="utf-8"/>
    <!-- 配置最大上传文件大小 -->
    <property name="maxUploadSize" value="46546546978"/>
    <!-- 配置在文件上传在内存中的最大阈值,超过这个阈值会在磁盘上生成临时文件 -->
    <property name="maxInMemorySize" value="150000"/>
</bean>

配置完成后,后台接收:

class FileController{
    public Map<String, Object> imageUpload(
        @RequestParam("file") MultipartFile[] multipartFiles, 
        @RequestParam("companyId" String companyId)){
            ......
        }
}