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

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 元