ajax传multipartfile,SpringBoot - 文件上传 - FormData、ajax、以及MultipartFile接收

文章目录

# 前端

## form 上传

## ajax 上传

# 后端

## MultipartFile

## MultipartHttpServletRequest

# 坑点：transferTo(File file)

# 另外

# 前端

## form 上传

form>

后台二进制文件进行接收：

这种方式写form标签必须要有

并且必须要有action、method、和enctype属性

且entype属性值必须为multipart/form-data

## ajax 上传

图片上传h3>

let files = this.files;

if(files.length){

let file = files[0] ;

let name = file.name;//读取选中文件的文件名

let size = file.size;//读取选中文件的大小

let formData = new FormData() ;

formData.append("mFile" , file) ;

formData.append("name" , name) ;

$.ajax({

url : '/demo/upload' ,

type: "POST" ,

data: formData,

processData: false , //告诉 jQuery 不要对参数进行处理

contentType: false , //高数jQuery 不要对contentType做处理，服务器会处理

success: function(result) {

console.log(result)

}

}) ;

console.log(url , name , avatar);

}

});script>

使用javascript的FormData来手动构建表单对象，

文件的二进制数据可以直接使用jQuery来获取到，

然后再通过ajax提交到服务端即可。

使用这种方法必须注意一下几点：

表单数据必须要由 FormData 来构建

processData 必须为false，告诉jQuery不要对参数进行处理

contentType 必须为false，告诉jQuery不要对contentType做处理，服务器会做处理

# 后端

## MultipartFile

以上面情况发送，后端能如下接收：

@RequestMapping("/demo/upload")

Map uploadFile(MultipartFile mFile) throws IOException {

//do something...

return null;

}

这里需要注意

我们使用SpringMVC的MultipartFile这个类来做文件的接收

这样的话得必须指定一个参数

这里是mFile，而且这个参数必须和前端的文件对应的name值一致

否则是接收不到文件的。

Done ~

## MultipartHttpServletRequest

那么如果前端没有指定参数，而是直接将文件的二进制流数据传过来又该怎么处理呢？

MultipartFile肯定是不能处理了

好在还有强大的SpringMvc封装了的 MultipartHttpServletRequest

可以直接将接收参数写为 MultipartHttpServletRequest 类型就可以了

这样就没有了参数名的约束

@RequestMapping("/demo/upload")

Map uploadFile(MultipartHttpServletRequest request) throws IOException {

//do something...

return null;

}

MultipartHttpServletRequest中的一系列getXxx方法可以直接获取到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路径必须是绝对路径并且存在才可以写入，否则…什么都没有发生，是的连异常都没有，可以说是凭本事坑了

# 另外

文件上传涉及到的其他的东西都是基本操作，总的来说，思路就三种

和前端约定好接口格式，参数命名，大小限制等等，使用MultipartFile来接收，简单粗暴，推荐

使用MultipartHttpServletRequest来接收请求，再从请求中获取MultipartFile

在请求中获取字节流数据，代码繁琐，效率低下，不推荐

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