Spring Boot + Vue 前后端分离，两种文件上传方式总结

SimpleDateFormat sdf = new SimpleDateFormat(“/yyyy/MM/dd/”);

@PostMapping(“/import”)

public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {

String format = sdf.format(new Date());

String realPath = req.getServletContext().getRealPath(“/upload”) + format;

File folder = new File(realPath);

if (!folder.exists()) {

folder.mkdirs();

}

String oldName = file.getOriginalFilename();

String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf(“.”));

file.transferTo(new File(folder,newName));

String url = req.getScheme() + “😕/” + req.getServerName() + “:” + req.getServerPort() + “/upload” + format + newName;

System.out.println(url);

return RespBean.ok(“上传成功!”);

}

这里的文件上传比较简单，上传的文件按照日期进行归类，使用 UUID 给文件重命名。

这里为了简化代码，我省略掉了异常捕获，上传结果直接返回成功，后端代码大伙可根据自己的实际情况自行修改。

Ajax 上传

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

在 Vue 中，通过 Ajax 实现文件上传，方案和传统 Ajax 实现文件上传基本上是一致的，唯一不同的是查找元素的方式。

<el-button @click=“importData” type=“success” size=“mini” icon=“el-icon-upload2”>导入数据

在这里，首先提供一个文件导入 input 组件，再来一个导入按钮，在导入按钮的事件中来完成导入的逻辑。

importData() {

let myfile = this.$refs.myfile;

let files = myfile.files;

let file = files[0];

var formData = new FormData();

formData.append(“file”, file);

this.uploadFileRequest(“/system/basic/jl/import”,formData).then(resp=>{

if (resp) {

console.log(resp);

}

})

}

关于这段上传核心逻辑，解释如下：

1. 首先利用 Vue 中的 $refs 查找到存放文件的元素。

2. type 为 file 的 input 元素内部有一个 files 数组，里边存放了所有选择的 file，由于文件上传时，文件可以多选，因此这里拿到的 files 对象是一个数组。

3. 从 files 对象中，获取自己要上传的文件，由于这里是单选，所以其实就是数组中的第一项。

4. 构造一个 FormData ，用来存放上传的数据,FormData 不可以像 Java 中的 StringBuffer 使用链式配置。

5. 构造好 FromData 后，就可以直接上传数据了，FormData 就是要上传的数据。

6. 文件上传注意两点，1. 请求方法为 post，2. 设置 Content-Type 为 multipart/form-data 。

这种文件上传方式，实际上就是传统的 Ajax 上传文件，和大家常见的 jQuery 中写法不同的是，这里元素查找的方式不一样（实际上元素查找也可以按照JavaScript 中原本的写法来实现），其他写法一模一样。这种方式是一个通用的方式，和使用哪一种前端框架无关。最后再和大家来看下封装的上传方法：

export const uploadFileRequest = (url, params) => {

return axios({

method: ‘post’,

url: ${base}${url},

data: params,

headers: {

‘Content-Type’: ‘multipart/form-data’

}

});

}

经过这几步的配置后，前端就算上传完成了，可以进行文件上传了。

使用 Upload 组件

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

如果使用 Upload ，则需要引入 ElementUI，所以一般建议，如果使用了 ElementUI 做 UI 控件的话，则可以考虑使用 Upload 组件来实现文件上传，如果没有使用 ElementUI 的话，则不建议使用 Upload 组件，至于其他的 UI 控件，各自都有自己的文件上传组件，具体使用可以参考各自文档。

<el-upload

style=“display: inline”

:show-file-list=“false”

:on-success=“onSuccess”

:on-error=“onError”

:before-upload=“beforeUpload”

action=“/system/basic/jl/import”>

总结

以上是字节二面的一些问题，面完之后其实挺后悔的，没有提前把各个知识点都复习到位。现在重新好好复习手上的面试大全资料（含JAVA、MySQL、算法、Redis、JVM、架构、中间件、RabbitMQ、设计模式、Spring等），现在起闭关修炼半个月，争取早日上岸！！！

下面给大家分享下我的面试大全资料

• 第一份是我的后端JAVA面试大全

后端JAVA面试大全

• 第二份是MySQL+Redis学习笔记+算法+JVM+JAVA核心知识整理

MySQL+Redis学习笔记算法+JVM+JAVA核心知识整理

• 第三份是Spring全家桶资料

MySQL+Redis学习笔记算法+JVM+JAVA核心知识整理

edis学习笔记+算法+JVM+JAVA核心知识整理

[外链图片转存中…(img-kZ6S4akW-1714448124067)]

MySQL+Redis学习笔记算法+JVM+JAVA核心知识整理

• 第三份是Spring全家桶资料

[外链图片转存中…(img-gj3Lq8dG-1714448124068)]

MySQL+Redis学习笔记算法+JVM+JAVA核心知识整理

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录