jQuery文件上传以及MultipartFile踩坑指南

文件上传下载基本是每个项目的标配功能，就文件上传而言，前端有各种千奇百怪的写法，后端自然也有各种千奇百怪的接收方法，这里对于一些常见方法不做评价，只做说明。

---

• 前端写法

1. 直接使用html原生表单

   <form action="/demo/upload2" method="POST" enctype="multipart/form-data">
       <input id="file" type="file" name="mFile"/>
       <input type="submit" value="上传"/>
   </form>
   

   这种方式写form标签必须要有，并且必须要有action、method、和enctype属性，且entype属性值必须为multipart/form-data，这样后台才会认为这是一个二进制文件进行接收。

2. 直接使用javascript来获取html标签中文件的值

   html：

   <input id="file" type="file" name="mFile"/>
   <input type="button" onclick="upload()" value="上传">
   

   javascript：

   function upload() {
   var formData = new FormData();
   formData.append("mFile",$("#file")[0].files[0]);
   $.ajax({
       url: "/demo/upload2",
       type: 'POST',
       data: formData,
       processData: false,
       contentType:false,
       success : function(data) {
           console.log(data);
       }
     });
   }
   

   这种写法可以省略很多html代码，使得页面结构在编码时显得简单易懂，大部分工作都交由javascript来完成，尤其因为去掉了form标签，所以得使用javascript的FormData来手动构建表单对象，文件的二进制数据可以直接使用jQuery来获取到，然后再通过ajax提交到服务端即可。使用这种方法必须注意一下几点：

   • 表单数据必须要由FormData来构建
   • processData必须为false，告诉jQuery不要对参数进行处理
   • contentType必须为false，告诉jQuery不要对contentType做处理，服务器会做处理

• 后端接收

@RequestMapping("/demo/upload")
Map<String, Object> uploadFile(MultipartFile mFile) throws IOException {
    //do something...
    return null;
}

这里需要注意我们使用SpringMVC的MultipartFile这个类来做文件的接收，这样的话得必须指定一个参数，这里是mFile，而且这个参数必须和前端的文件对应的name值一致，否则是接收不到文件的。那么如果前端没有指定参数，而是直接将文件的二进制流数据传过来又该怎么处理呢，MultipartFile肯定是不能处理了，好在还有强大的SpringMvc封装了的MultipartHttpServletRequest，可以直接将接收参数写为MultipartHttpServletRequest类型就可以了，这样就没有了参数名的约束

@RequestMapping("/demo/upload")
Map<String, Object> uploadFile(MultipartHttpServletRequest request) throws IOException {
    //do something...
    return null;
}

MultipartHttpServletRequest中的一系列getXxx方法可以直接获取到MultipartFile对象，简单方便。

getXxx方法.png

不推荐获取原始输入输出流的方式来获取文件，经实测，使用流的方式获取文件的效率是使用MultipartFile对象的百分之一，甚至不及，毫不夸张。

• 坑点：

transferTo(File file)

MultipartFile中封装了一个非常简单粗暴的方法transferTo(File file)，可以直接将MultipartFile对象保存到指定的file文件中，but~

public void transferTo(File dest) throws IOException, IllegalStateException {
    this.part.write(dest.getPath());
    if (dest.isAbsolute() && !dest.exists()) {
        FileCopyUtils.copy(this.part.getInputStream(), Files.newOutputStream(dest.toPath()));
    }
}

在它的接口实现类中是这样写的，传入的file路径必须是绝对路径并且存在才可以写入，否则...什么都没有发生，是的连异常都没有，可以说是凭本事坑了

• 文件上传涉及到的其他的东西都是基本操作，总的来说，思路就三种
  1. 和前端约定好接口格式，参数命名，大小限制等等，使用MultipartFile来接收，简单粗暴，推荐
  2. 使用MultipartHttpServletRequest来接收请求，再从请求中获取MultipartFile
  3. 在请求中获取字节流数据，代码繁琐，效率低下，不推荐

• enjoy coding...