Question

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

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

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

Answer 1

我使用react-dropzone上传文件，不确定它是否与Spring兼容。你可以尝试一下。

如何使用它的一个例子

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

      </Dropzone>
    </div>

Answer 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
}

使用React前端应用程序和Spring（Java）后端应用程序

2 个答案: