reactjs - 如何从输入类型文件元素获取实际文件？

Question

var file = e.target.files[0];

或

var file = e.target.value;

我正在使用 React 和 Socket io 尝试通过聊天发送图像。我所能得到的只是文件路径而不是实际的文件。我从未处理过文件输入，因此我试图弄清楚如何获取该文件并将其转换为可以通过套接字 io 发送的二进制字符串。

帮忙？您会推荐什么包吗？

Answer 1

您需要从输入获取文件，例如您可以在 onChange 事件上触发处理程序。之后，您必须将文件从输入(e.target.file[0] 或循环，如果文件很多)放入 FileReader并从文件中提取 blob。接下来，您可以通过套接字发送提取的blob，如果blob太大，您可以将其切成 block 。

有代码示例:

const readBlob = file => new Promise((resolve, reject) => {
  const reader = new FileReader();

  reader.onload = e => {
    resolve(e.target.result);
  };

  reader.readAsText(file);
});

对不起我的英语!)