Question

我想将上传的图像文件以及用户输入的数据发送到在JAVA上实现的后端。

`const payload = {
        id: null,
        name : Name,
        email : Email

        };
        //data.append("myjsonkey", );

        await fetch('http://localhost:8080/student/insertStudent', {
            method: 'POST',
            body: JSON.stringify(payload),
            headers : {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            }
        })`

使用此实现，我能够使用POST请求将数据发送到后端。我现在想在要在后端接收的有效负载中附加一个图像文件。用于上传图片的代码是

`fileChangedHandler = (event) => {
    this.setState({selectedFile: event.target.files[0]})
    }

    uploadHandler = () => { 
    console.log(this.state.selectedFile)
    }
render() {
        return (
            <div>
                <input type="file" onChange={this.fileChangedHandler}/>
                <button onClick={this.uploadHandler}>Upload!</button>
            </div>
        );
    }`

我们将不胜感激任何帮助。

Answer 1

您可以使用formData发送数据...这是React中api请求的示例代码。

uploadHandler = () => { 
   const formData = new FormData();
   formData.append('file', this.state.selectedFile);
   axios.post('http://localhost:8080/student/image',
   formData
);
}

Java控制器

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/student/")
public class StudentController {

@RequestMapping(value = "image" ,method = RequestMethod.POST, consumes = "multipart/form-data")
    @ResponseStatus(HttpStatus.CREATED)
    public void image(
            @RequestParam("file") MultipartFile file ){
            // CODE HERE

    }
}

使用React.JS将图像文件以及其他数据发送到Java后端

1 个答案: