VUE + SSM + ElementUI 图片上传失败，访问后台接口时报400错误

最近在做vue + SSM 前后端分离项目的时候遇到了图片上传失败的错误。经过一番查询，发现问题如下：

后台无法解析MultipartFile，需要将该过程托管给Spring。

Springmvc中，文件上传通过MultipartResolver实现，故只需要在Spring-mvc.xml中注册MultipartResolver即可。

MultiPartResolver实现类有两个：

1. CommonsMultipartResolver
2. StandardServletMultipartResolver

第一个需要使用commons-fileupload的jar包支持，但没有对servlet版本的要求。第二个必须使用servlet3以上的版本

具体操作：

第一步：在pom.xml中添加依赖

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

需要1.2以上版本

第二步：配置一个bean:

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize" value="104857600" />
		<property name="defaultEncoding" value="UTF-8" />
</bean>

maxUploadSize默认值为-1，表示最大上传文件大小

第三步：可以直接写controller了

@ResponseBody
    @RequestMapping("/showImage")
    public String showImage(@RequestParam("file") MultipartFile file) throws Exception{
		System.out.println(file);
    	//判断文件类型
        String fType=file.getContentType();
        assert fType != null;
        String fileType = fType.substring(fType.indexOf("/")+1);
        if("jpeg".equals(fileType)){
            fileType="jpg";
        }
        long time=System.currentTimeMillis();
        //保存文件的绝对路径
        String filename = "items" + time; //保证所有文件名都不相同
        String path="/*这里填文件路径*/"+filename+"."+fileType;
        try{
            file.transferTo(new File(path));
        }catch (Exception e){
            e.printStackTrace();
        }
        fileUrl = filename;
        System.out.println(fileUrl);
        return "ok";
    }

附上我的前端VUE代码

<el-upload
    accept="image/jpg,image/jpeg"
    class="avatar-uploader"
    action="http://localhost:xxxx/xxx/showImage" 这里写后端接口地址
    name="file"
    :limit="1"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
>
  <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

只需要修改action内容即可，其他方法和属性用法直接参照ElementUI官方文档即可

参考

https://blog.csdn.net/just4you/article/details/70162605