<form action="/demo/upload" method="POST" enctype="multipart/form-data">
<input id="file" type="file" name="mFile"/>
<input type="submit" value="上传"/>
form>
后台二进制文件进行接收:
<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做处理,服务器会做处理以上面情况发送,后端能如下接收:
@RequestMapping("/demo/upload")
Map<String, Object> uploadFile(MultipartFile mFile) throws IOException {
//do something...
return null;
}
这里需要注意
Done ~
那么如果前端没有指定参数,而是直接将文件的二进制流数据传过来又该怎么处理呢?
MultipartFile肯定是不能处理了
好在还有强大的SpringMvc封装了的MultipartHttpServletRequest
可以直接将接收参数写为MultipartHttpServletRequest
类型就可以了
这样就没有了参数名的约束
@RequestMapping("/demo/upload")
Map<String, Object> uploadFile(MultipartHttpServletRequest request) throws IOException {
//do something...
return null;
}
MultipartHttpServletRequest中的一系列getXxx方法可以直接获取到MultipartFile对象,简单方便。
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路径必须是绝对路径并且存在才可以写入,否则…什么都没有发生,是的连异常都没有,可以说是凭本事坑了
文件上传涉及到的其他的东西都是基本操作,总的来说,思路就三种