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

现在我的问题是，如果是因为路径，我怎么才能正确地做它（据我所知，浏览器不允许它出于安全问题）？

否则，问题出在哪里？怎么解决？

浏览器控制台中的错误：

邮递http://localhost:8080/uploadFile400

和

{“timestamp”：“2019-09-16T07：20：30.382 0000”，“status”：400，“error”：“Bad Request”，“message”：“Required request part 'file' is not present”，“trace”：“org.springframework.web.multipart.support.MissingServletRequestPartException： Required request part 'file' 不存在\r\n\tat .......

这是完整的错误消息。

如果需要 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

从我所看到的，在＜code＞onInputChange（）（此文件路径不是实际文件）

改为下面，重要！

< code > this . state . file = e . target . files[0]；

一些建议是，使用Fetch Api来发送post请求，而不是使用普通的旧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 boot控制器中使用< code > @ request part(" file ")

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