主要解释2个问题:
1)浏览器选择一个要上传的文件(如图片),做了什么?
js代码在选择文件时候,会读取文件到MultipartFile 对象中。每个浏览器对这个对象的封装的可能不太一样。
前端代码片段:
![f7ce7d89b4f171fb248ef30ca494770d.png](https://i-blog.csdnimg.cn/blog_migrate/f3029b771372d0062c55fbdd114a08db.png)
uploadurl函数会调用Java的Restful接口。
public APIResult uploadFile(MultipartFile uploadFile) {
//这里我要把这个服务发布到dubbo上,用service.
//上传图片业务处理。
try {
//1、取文件的扩展名
String originalFilename = uploadFile.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
//2、创建一个FastDFS的客户端
//TODO 这个是个fastdfs的缺陷。部署项目时,一定要在服务器同级目录下新建目录:src/main/resources/client.properties
FastDFSClient fastDFSClient = new FastDFSClient("src/main/resources/client.properties");
//3、执行上传处理
String path = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
//4、拼接返回的url和ip地址,拼装成完整的url
String fileUrl = IMAGE_SERVER_URL +"/"+ path;
return APIResult.ok(fileUrl);
} catch (Exception e) {
e.printStackTrace();
return APIResult.build(500, "save picture failure");
}
}
}
2)前端程序(javascript)调用后端接口(java)传送文件是怎么做到传文件给后端?
前后端交互对象其实都封装在MultipartFile中。
前端读取文件后,把文件的数据、文件的名称、修改时间等封装到这个对象。
后端接受到这个对象后,把文件的数据、文件的名称、修改时间等解析出来。
架构图
![6f81c570a164f5b419181640a9cf6ffb.png](https://i-blog.csdnimg.cn/blog_migrate/7cfbd8c17270a8aae23e1de08a08c7e9.jpeg)