使用React前端應用程序和Spring（Java）后端應用程序上傳文件

Question

我有一個項目使用Java的Spring作為后端，使用React作為前端，我想將文件上傳到服務器。 在后端，我有一個具有以下方法的Spring控制器：

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

在前端，我想使用一些npm庫上載文件。 問題是我發現的所有庫都不以Spring控制器可以處理的方式發送文件。 也許我缺少了一些東西：從React前端上傳文件到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
}