使用 React 前端应用和 Spring (Java) 后端应用上传文件答案

【问题标题】：Upload file using React frontend app and Spring (Java) backend app使用 React 前端应用和 Spring (Java) 后端应用上传文件
【发布时间】：2018-01-29 02:11:34
【问题描述】：

我有一个项目使用 Java 的 Spring 作为后端，React 作为前端，我想上传一个文件到服务器。在后端，我有一个带有以下方法的 Spring 控制器：

@RequestMapping("/upload-file")
public void uploadFile (MultipartHttpServletRequest multipartHttpServletRequest) {
    //save on server logic comes here
}

在前端，我想使用一些 npm 库来上传文件。问题是我发现的所有库都没有以 Spring 控制器可以处理的方式发送文件。也许我错过了一些东西：将文件从反应前端上传到 Spring 后端的最佳方法是什么？

【问题讨论】：

标签： reactjs spring-mvc file-upload

【解决方案1】：

我用react-dropzone上传文件，不知道能不能兼容Spring。你可以试一试。

一个例子如何使用它

<div className='dropzone'>
      <Dropzone
        name={name}
        multiple={false}
        onDrop={(filesToUpload, e) => {
          return input.onChange(filesToUpload)
        }}>

      </Dropzone>
    </div>

【讨论】：

【解决方案2】：

前端：如果您使用前面提供的react-dropzone，您可以使用以下代码发送带有文件的请求：

    onDrop(accepted, rejected) {
        if (rejected.length) {
            //do something with rejected files
        } else {
            let data = new FormData();
            for (let i = 0; i < this.state.files.length; i++) {
                let file = accepted[i];
                data.append("file" + i, file, file.name);
            }
            const config = {
                headers: { 'content-type': 'multipart/form-data;boundary=gc0p4Jq0M2Yt08jU534c0p' }
            };
            axios.post("upload-files", data, config);
        }
    };

后端：

@RequestMapping(value = "/upload-files", headers = "content-type=multipart/*", method = RequestMethod.POST)
public void upload(@RequestParam(value = "file0", required = true) MultipartFile multipartFile, Integer adminOid) throws IOException {
    //do something with the multipartFile
}

【讨论】：