uniapp 移动端上传文件_Spring Boot + Vue 前后端分离，两种文件上传方式总结

在Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来说，文件上传有两种不同的实现方案：

1. 通过 Ajax 实现文件上传
2. 通过 ElementUI 里边的 Upload 组件实现文件上传

两种方案，各有优缺点，我们分别来看。

准备工作

首先我们需要一点点准备工作，就是在后端提供一个文件上传接口，这是一个普通的 Spring Boot 项目，如下：

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 实现文件上传基本上是一致的，唯一不同的是查找元素的方式。

导入数据

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

importData() {

let myfile = this.$refs.myfile;

let files = myfile.files;

let file = files[0];

var formData = new FormData();

formData.append("file