使用 React 发布多个多部分文件答案

【问题标题】：POST muiltiple multipart file with React使用 React 发布多个多部分文件
【发布时间】：2018-01-14 16:26:48
【问题描述】：

我现在想将文件列表发送到端点。

我的输入组件：

<input onChange={(e) => Actions.uploadXLS(e.target.files)} multiple type="file" name="xlsz" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style={{ display: 'none' }}/>

动作处理程序：

  uploadXLS(files) {
    let i = 0;
    const data = new FormData();
    for ( i = 0; i < files.length; i++ ) {
      data.append( 'file' , files[i]);
    }
    console.log(data);
    this.getInstance().callUploadXLS( data );
  }

控制台打印：FormData{}

【问题讨论】：

FormData will not allow you to inspect it's object。检查文件是否正确传递的唯一方法是检查 AJAX 调用（通过网络选项卡）。 console.log( data ); 将始终显示相同的对象，而不是文件本身。
你的代码应该可以工作
@dinchev 这是有效载荷： ------WebKitFormBoundaryx290rYq0fZYR1L6x Content-Disposition: form-data;名称=“文件”； filename="ExcelFileCore-1.xlsx" Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ------WebKitFormBoundaryx290rYq0fZYR1L6x Content-Disposition: form-data;名称=“文件”； filename="ExcelFileCore-1 - Copy.xlsx" Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ------WebKitFormBoundaryx290rYq0fZYR1L6x--
是的，所以你上传了两个文件ExcelFileCore-1.xlsx，ExcelFileCore-1 - Copy.xlsx。如果工作正常，后端应该已经捕获了它们。
@dinchev 似乎后端工作正常。检查下面的答案。请注意，我没有从端点得到任何响应。

标签： javascript reactjs multipartform-data reactjs-flux

【解决方案1】：

        File file = new File("/Users/user1/Documents/VendorDbResources/ExcelFileCore-1.xlsx");
        FileInputStream input = new FileInputStream(file);
        MultipartFile multipartFile1 = new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));

        file = new File("/Users/user1/Documents/VendorDbResources/ExcelFileCore-2.xlsx");
        input = new FileInputStream(file);
        MultipartFile multipartFile2 = new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));

        MultipartFile[] arrayOfMultipartFile = {multipartFile1, multipartFile2};

        if (arrayOfMultipartFile.length > 0)
            return vendorService.readExcelFile(arrayOfMultipartFile);
        else
            return null;

我已经尝试了使用静态数据的后端功能。您可以在上面看到我创建了一个多部分文件数组并提供给服务实现。

而且它运行良好。条目也可以在 db 中看到。

【讨论】：

你能提供整个控制器端点吗？在这种情况下，file 应该是 MultipartFile 的数组，而不是单个 MultipartFile。由于前端会向您发送一组文件。从这里查看5. Multiple File upload。
MultipartFile[] arrayOfMultipartFile = {multipartFile1, multipartFile2}; vendorService.readExcelFile(arrayOfMultipartFile);
看起来您没有粘贴控制器代码，只是从那里粘贴了一行。你在哪里拦截请求参数是我正在寻找的。无论如何这个问题是关于前端和反应的，所以我不认为解决 Java 会帮助这里的其他人。你可以创建另一个关于如何保存的问题使用 Java 编写多个文件，我猜你会在那里获得更多帮助。