react.js文件没有上传spring服务器

Question

在我的项目中，我在后端有 Spring Boot，在前端有 React.js。

我知道我的后端工作正常，因为我已经用 Postman 对其进行了测试。

在上传文件的前端，我有一个名为SubmitAssignment，看起来像这样：

state={file:''};
uploadFile = (e) =>{
    e.preventDefault();
    var formData = new FormData();
    formData.append("file", this.state.file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:8080/uploadFile");
    xhr.onload = function() {
        console.log(xhr.responseText);
        var response = JSON.parse(xhr.responseText);
        if(xhr.status === 200) {
            console.log("upload successful");
        } else {
            console.log("upload failed");
        }
    };
    xhr.send(formData);
};
onInputChange = (e) =>{
    this.state.file=e.target.value;
    console.log(this.state.file);
};
render() {
    return (
        <div>
            <h1>Please select file(s):</h1>
            <form>
                <input className="input-file" id="my-file" type="file" onChange={this.onInputChange}/>
                <button onClick={this.uploadFile}>Upload</button>
            </form>
        </div>
    );
}

但问题是每次上传都失败。也许原因是路径，不确定。我试图console.log 路径。我得到的是 C:\fakepath\Screenshot (187).png

现在我的问题是，如果是因为路径，我该如何正确地做到这一点（据我所知，浏览器出于安全考虑不允许这样做）？

否则，有什么问题？如何解决？

浏览器控制台报错：

POST http://localhost:8080/uploadFile 400

还有，

{"timestamp":"2019-09-16T07:20:30.382+0000","status":400,"error":"Bad Request","message":"Required request part 'file ' 不存在","trace":"org.springframework.web.multipart.support.MissingServletRequestPartException: 所需的请求部分 'file' 不存在\r\n\tat .......

Here 是完整的错误消息。

如果出于任何原因需要 REST：

@PostMapping("/uploadFile")
public UploadFileResponse uploadFile(@RequestParam("file") MultipartFile file) {
    String fileName = fileStorageService.storeFile(file);
    String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
            .path("/downloadFile/")
            .path(fileName)
            .toUriString();
    return new UploadFileResponse(fileName, fileDownloadUri,
            file.getContentType(), file.getSize());
}

Answer 1

据我所知，在onInputChange() 中，您正在分配目标值this.state.file=e.target.value;（这是文件路径而不是实际文件）

改为下面，重要！

this.state.file=e.target.files[0];

还有一些建议是，使用 Fetch Api 发送帖子请求而不是使用普通的旧 Javascript

const formData = new FormData();
formData.append("file", this.state.file);
fetch('http://localhost:8080/uploadFile', {
    method: 'POST',
    body: formData
  })
   .then(success => console.log(success))
   .catch(error => console.log(error));

在您的 Spring 引导控制器中使用 @RequestPart("file")

@PostMapping("/uploadFile")
public UploadFileResponse uploadFile(@RequestPart("file") MultipartFile file) {
//Logic
}