react点击按钮选择上传图片

在 React 中，可以使用 `<input>` 标签的 `type="file"` 属性来实现点击按钮选择上传图片的功能。具体实现步骤如下：

1. 在组件中添加一个 `<input>` 标签，并设置 `type="file"` 属性。

<input type="file" onChange={handleImageChange} />

2. 添加一个事件处理函数 `handleImageChange`，用于处理当用户选择图片后的操作。

const handleImageChange = (e) => {
  const file = e.target.files[0]; // 获取用户选择的文件
  const reader = new FileReader(); // 创建一个 FileReader 对象
  reader.onload = () => {
    const imageDataURL = reader.result; // 获取图片的 DataURL
    // 在这里可以将 imageDataURL 发送给后端进行处理
  };
  reader.readAsDataURL(file); // 读取文件，读取完成后会触发 onload 事件
};

在 `handleImageChange` 函数中，首先获取用户选择的文件，然后创建一个 FileReader 对象，用于读取文件内容。通过 `reader.readAsDataURL()` 方法读取文件，读取完成后会触发 `onload` 事件，可以在该事件中获取图片的 DataURL，然后将其发送给后端进行处理。

需要注意的是，在发送请求时，可能需要对 DataURL 进行处理，例如去掉前缀、转成 Blob 对象等。具体处理方式可以根据后端的要求进行调整。