react input读取图片

在React中，可以使用input标签和onChange事件来读取图片。首先，需要在组件的渲染方法中添加一个input标签，并设置其type为file，如下所示：

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

然后，需要在组件中定义一个处理图片上传的方法handleImageUpload，这个方法会在用户选择了图片后被调用。在该方法中，可以通过event.target.files来访问用户选择的文件。可以使用FileReader对象来读取图片文件，如下所示：

const handleImageUpload = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onloadend = () => {
    // 在这里可以获取到读取的图片数据
    const imageDataUrl = reader.result;
    // 进行其他操作，例如显示图片或发送到服务器
  };

  reader.readAsDataURL(file);
};

在reader的onloadend事件处理程序中，可以通过reader.result获取到读取的图片数据，数据的格式为Data URL，可以直接用于显示图片。你可以将这个数据发送到服务器端保存，或者进行其他操作，例如裁剪、压缩等。

需要注意的是，由于安全原因，浏览器的安全策略限制了对文件路径的访问，因此无法直接获取到文件的绝对路径。但是，通过FileReader可以获取到文件内容。以上就是使用React的input标签和onChange事件来读取图片的方法。