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

文章目录

    • # 前端
        • ## form 上传
        • ## ajax 上传
    • # 后端
        • ## MultipartFile
        • ## MultipartHttpServletRequest
    • # 坑点:transferTo(File file)
    • # 另外

# 前端

## form 上传

<form action="/demo/upload" 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

## ajax 上传

<h3>图片上传h3>
<input type="file" name="file">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">script>
<script type="text/javascript">
$(`[type='file']`).bind("change", function(){ //加载md文件
    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<String, Object> uploadFile(MultipartFile mFile) throws IOException {
    //do something...
    return null;
}

这里需要注意

  • 我们使用SpringMVC的MultipartFile这个类来做文件的接收
    这样的话得必须指定一个参数
    这里是mFile,而且这个参数必须和前端的文件对应的name值一致

    否则是接收不到文件的。

Done ~

## MultipartHttpServletRequest

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

MultipartFile肯定是不能处理了
好在还有强大的SpringMvc封装了的 MultipartHttpServletRequest
可以直接将接收参数写为 MultipartHttpServletRequest 类型就可以了
这样就没有了参数名的约束

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

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

SpringBoot - 文件上传 - FormData、ajax、以及MultipartFile接收_第1张图片

# 坑点: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踩坑指南》

你可能感兴趣的:(#,spring-mvc,#,SpringBoot)