react Java 实现文件上传

在 React 中实现文件上传需要使用 HTML5 提供的 `File` 和 `FormData` 对象。以下是一个简单的示例代码：

import React, { useState } from 'react';

function FileUpload() {
  const [file, setFile] = useState(null);

  const handleInputChange = event => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = async event => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', file);
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    console.log(response);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleInputChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

export default FileUpload;

在上面的代码中，`handleInputChange` 函数会在文件选择器中选择文件时调用，并将选择的文件存储在 `file` 状态中。`handleSubmit` 函数会在表单提交时调用，创建一个 `FormData` 对象并将选择的文件附加到其中。然后，使用 `fetch` API 将表单数据发送到服务器。请注意，这是一个异步操作，必须使用 `async/await` 或 `.then()` 来处理响应。

在服务器端，您可以使用任何后端语言来处理文件上传。以下是为 Java Spring Boot 编写的示例代码：

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.*;

@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public void handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 处理上传的文件
    }
}

在上面的代码中，`@RequestParam("file")` 注解表示将上传的文件作为 `file` 参数传递给 `handleFileUpload` 方法。然后，您可以使用 `MultipartFile` 类来处理上传的文件。