火爆全网！Vue3文件上传新技能，参数携带，从此无忧！

2022-12-12 03:49:26

Vue3文件上传新技能：参数携带，从此无忧！

上传文件，从入门到精通

在Web开发中，文件上传是一项必备技能。从图片和视频到文档和表格，我们经常需要将文件从客户端传送到服务器。随着Vue3的兴起，文件上传变得更加简便和灵活，尤其是在携带参数上传时。

Vue3中的文件上传

Vue3为文件上传提供了便捷的解决方案，无需复杂的代码或库。只需使用<input type="file">元素，即可轻松选择文件：

<input type="file" multiple>

携带参数上传

有时，我们需要在上传文件时携带一些额外的信息，比如文件、用户ID或其他相关参数。Vue3允许我们轻松实现这一功能：

const formData = new FormData();
const files = document.querySelector('input[type=file]').files;
for (let i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}
formData.append('param1', 'value1');
formData.append('param2', 'value2');

后端Java接收

在后端Java中，我们可以使用@RequestParam注解来接收文件和参数：

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile[] files, @RequestParam("param1") String param1, @RequestParam("param2") String param2) {
  // ... 文件处理逻辑
}

代码示例

将文件和参数上传到后端Java的完整代码示例：

前端Vue3代码：

const formData = new FormData();
const files = document.querySelector('input[type=file]').files;
for (let i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}
formData.append('param1', 'value1');
formData.append('param2', 'value2');

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then((res) => {
  console.log(res.data);
});

后端Java代码：

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile[] files, @RequestParam("param1") String param1, @RequestParam("param2") String param2) {
  for (MultipartFile file : files) {
    // ... 文件处理逻辑
  }
  return "success";
}