VUE项目 实现多文件上传

好的，针对你的问题，我可以为你提供以下的思路和代码示例：

1. 在前端页面中添加上传文件的表单，可以使用 VUE 中的 el-upload 组件实现。

2. 在后端代码中编写接收上传文件的接口，可以使用 SpringBoot 中的 MultipartFile 类来处理上传文件。

3. 对于多文件上传，前端页面可以使用 el-upload 组件的 multiple 属性，后端接口则可以使用 MultipartFile[] 数组来接收。

下面是一个示例的前端代码：

<template>
  <el-upload
    action="/upload"
    multiple
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500k</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件');
      }
      if (!isLt500K) {
        this.$message.error('上传文件大小不能超过 500KB');
      }

      return isJPG && isLt500K;
    },
    handleSuccess(response) {
      this.$message.success(`上传成功：${response}`);
    },
  },
};
</script>

其中，el-upload 组件的 action 属性表示上传文件的后端接口地址，multiple 属性表示支持多文件上传。beforeUpload 方法用于在上传前对文件进行校验，handleSuccess 方法则是上传成功后的回调函数。

下面是一个示例的后端代码：

@PostMapping("/upload")
public String handleFileUpload(@RequestParam("files") MultipartFile[] files) {
    List<String> fileNames = new ArrayList<>();
    for (MultipartFile file : files) {
        String fileName = StringUtils.cleanPath(file.getOriginalFilename());
        fileNames.add(fileName);
        try {
            Path path = Paths.get(uploadDir + fileName);
            Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    return "Uploaded files: " + fileNames;
}

其中，@RequestParam("files") MultipartFile[] files 表示接收名为 files 的文件数组，uploadDir 表示文件上传的目录路径。

希望这个代码示例能够对你有所帮助！