multipartFile = new MockMultipartFile(file.getName(), file.getName(), ContentType.APPLICATION_OCTET_STREAM.toString(), fileInputStream);

}catch (Exception e){

e.printStackTrace();

}

return multipartFile;

}

注意：此处需要加入maven依赖，并且引入import org.apache.http.entity.ContentType;否则ContentType就无法引入

org.apache.httpcomponents

httpcore

4.4.5

[](()5.获取MultipartFile文件类型的大小

=====================================================================================

/**

• 获取MultipartFile文件类型的大小

• @param file 文件

• @param sizeTpe 可选择的文件大小类型：B K M G

• @return

*/

public static Double getMultipartFileSize(MultipartFile file,String sizeTpe){

Double fileSize=0.;

switch (sizeTpe.toUpperCase()){

case “B”:

fileSize = (double) file.getSize();

break;

case “K”:

fileSize = (double) file.getSize()/1024;

break;

case “M”:

fileSize = (double) file.getSize()/ 1048576;

break;

case “G”:

fileSize = (double) file.getSize()/ 1073741824;

break;

}

return fileSize;

}

[](()6.压缩图片

===================================================================

/**

• 压缩图片

• @param file

• @return

*/

public static File compressImage(MultipartFile file){

File re=null;

try {

InputStream inputStream = file.getInputStream();

// 把图片读入到内存中

BufferedImage bufImg = ImageIO.read(inputStream);

// 压缩代码

// 存储图片文件byte数组

ByteArrayOutputStream bos = new ByteArrayOutputStream();

System.out.println(bufImg.getWidth());

System.out.println(bufImg.getHeight());

BufferedImage newBufferedImage = new BufferedImage(bufImg.getWidth()-100, bufImg.getHeight()-100,BufferedImage.TYPE_INT_RGB);

newBufferedImage.createGraphics().drawImage(bufImg, 0, 0, Color.WHITE, null);

//先转成jpg格式来压缩,然后在通过OSS来修改成源文件本来的后缀格式

ImageIO.write(newBufferedImage,“jpg”,bos);

//获取输出流

inputStream = new ByteArrayInputStream(bos.toByteArray());

String filePath=PropertyUtil.getProp(“pathConfig.properties”, “video.local.path”);

File newFile=new File(filePath+“\”+new Date().getTime()+“.jpg”);

java.nio.file.Files.copy(

inputStream,

newFile.toPath(),

StandardCopyOption.REPLACE_EXISTING);

re=newFile;

}catch (Exception e){

e.printStackTrace();

}

return re;

}

[](()7.前后端文件的交互

=======================================================================

[](()7.1 单文件的交互

---

我们前端使用ajax进行表单提交

前端：

• 1.h5的用法

var file = document.getElementById(‘exampleInputFile’);

var temp = file.files[0];

var formData = new FormData();

formData.append(‘file’, temp)

• 2. vue-elementUi的用法

const formData = new FormData();

formData.append(“file”, this.fileList[0].raw);

ajax 发送请求：

$.ajax({

url: “http://localhost:2000/vue/upload”,

data: formData,

dataType: “json”,

type: “post”,

processData: false, // 告诉jQuery不要去处理发送的数据

contentType: false, // 告诉jQuery不要去设置Content-Type请求头

//加上这句话,允许浏览器向服务器跨域请求时携带cookie

xhrFields: {

withCredentials: true

},

crossDomain: true,

success: function(data) {

console.log(data);

},

error: function(data) {

console.log(data);

}

});

后端：

@ResponseBody

@RequestMapping(value = “/uploadVideo”)

public Map<String,Object> uploadVideo(@RequestParam(value = “file”, required = false) MultipartFile file,

@RequestParam(value = “videoName”) String videoName,

HttpServletResponse response, HttpServletRequest request) {

response.setHeader(“Access-Control-Allow-Origin”, request.getHeader(“Origin”));

response.setHeader(“Access-Control-Allow-Credentials”, “true”);// 允许服务器向浏览器跨域响应时更改浏览器（客户端）的cookie

System.out.println(“您发送的文件为：”+file.getOriginalFilename());

return map;

}

对应关系如下：

[](()7.2 多文件的交互

---

前端：

• 1.h5的用法

var 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 formData = new FormData();

var files = document.getElementById(‘exampleInputFile’).files;

for(i=0;i<files.length;i++){

formData.append(‘files[’+i+“]”, files[i])

}

• 2. vue-elementUi的用法

const formData = new FormData();

for (let i = 0; i < this.fileList.length; i++) {

formData.append(“files[”+i+“]”, this.fileList[i].raw);

}

后端：

@PostMapping(path = “/upload”)

@ResponseBody

public Map<String,Object> upload(FilePo filePo, HttpServletResponse response, HttpServletRequest request){

response.setHeader(“Access-Control-Allow-Origin”, request.getHeader(“Origin”));

response.setHeader(“Access-Control-Allow-Credentials”, “true”);// 允许服务器向浏览器跨域响应时更改浏览器（客户端）的cookie

Map<String,Object>map=new HashMap<>();

if(filePo.getFiles()!=null){

FileUtils.MultipartFile2File(filePo.getFiles()[0]);

}

map.put(“result”,200);

return map;

}

对应的FilePo：

import org.springframework.web.multipart.MultipartFile;

public class FilePo {

private MultipartFile []files;

public MultipartFile[] getFiles() {

return files;

}

public void setFiles(MultipartFile[] files) {

this.files = files;

}

}

对应关系如下：

[](()7.3 ajax交互

---

无论是h5还是vue我们均采用jquery的ajax进行前后端的交互，个人习惯问题，如果是vue也可以使用axios

$.ajax({

url: “http://localhost:2000/vue/upload”,

data: formData,

dataType: “json”,

type: “post”,

processData: false, // 告诉jQuery不要去处理发送的数据

contentType: false, // 告诉jQuery不要去设置Content-Type请求头

//加上这句话,允许浏览器向服务器跨域请求时携带cookie

xhrFields: {

withCredentials: true

},

crossDomain: true,

success: function(data) {

console.log(data);

},

error: function(data) {

console.log(data);

}