Vue3+AntDesign+SpringBoot处理多个文件（TXT）的上传，接收，读取

1. 前端用的是Vue3+Antdesign
2. 后端用的是SpringBoot

在前端上传多个文件（本例子是txt文件），后端接受之后并读取txt的内容。

我没有把全部的代码贴上来哈，如果大家想看完整的，可以参考Antdesign官方给出的，我这里的使用场景跟官网的有一点点不太一样。我只把关键的代码贴了一下。

我这里的使用场景是用户上传了多个文件之后，再点击一个“Start Upload”按钮，才会把文件传到后端。

以下是UI组件的代码：

  
    

      
    
    
Click or drag file to this area to upload
    

      Support for a single or bulk upload. Strictly prohibit from uploading company data or other
      band files
    
  
  
    {{ uploading ? 'Uploading' : 'Start Upload' }}
  

以下是前端上传文件的调用方法

    const handleRemove = file => {
      const index = fileList.value.indexOf(file)
      const newFileList = fileList.value.slice()
      newFileList.splice(index, 1)
      fileList.value = newFileList
    }

    const beforeUpload = file => {
      fileList.value = [...fileList.value, file]
      return false
    }

    const handleUpload = async () => {
      const formData = new FormData()
      fileList.value.forEach(file => {
        // 注意这里append的名字“file”，需要跟后端接受的名字是一样的
        formData.append('file', file)
      })
      uploading.value = true 
      // 这里的axios换成大家熟悉的写法就可以，主要是formData是放到body里面的
      await APIService.post('/upload/xxx', formData).then((res) => {
        console.log(res)
      })
      
    }

我不写那么复杂，严格的分controller和service，目的是给大家看如何接收到文件并且读取文件。大家可以根据自己的实际情况去调整。

需要注意的是@RequestParam(value = "file")的file是要跟前端的append的那么file是要保持一致的。

    @PostMapping("upload")
    @ResponseStatus(HttpStatus.OK)
    @ResponseBody
    public void upload(@RequestParam(value = "file") MultipartFile[] files) throws IOException {
        for (MultipartFile file : files) {
            BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(file.getInputStream()));
            String lineTxt;
            while ((lineTxt=bufferedReader.readLine())!=null){
                System.out.println(lineTxt);
            }
        }
    }