reactJS windows.FileReader readAsArrayBuffer方法错误

时间:2019-12-23 07:34:01

标签: javascript reactjs io filereader

reactJS使用拖放区接收文件并将其替换为字节缓冲区时出错

TypeError:第一个参数必须是字符串,Buffer,ArrayBuffer,Array或类似数组的对象。

  onDrop = async (file) => {
try {     
  console.log(file.name);
  let reader = new window.FileReader();
  reader.readAsArrayBuffer(file); // <<== Error occurred here
  const buffer = await Buffer.from(reader.result);
  console.log(buffer.length);
} catch (error) {
  console.log(error);
}

我该如何解决..请帮助

1 个答案:

答案 0 :(得分:0)

朋友,您的代码有几个问题,请结帐:

  • 我如何检索文件:函数参数(this)引用调用方法的输入,而不是文件
  • FileReader API 仅支持回调,如果您要使用异步/等待,则必须将其包装在自己的方法“ promise-managed”中
  • 要知道缓冲区长度,必须调用 ArrayBuffer.byteLength
  • 此外,如果您不使用任何库并且在NODE env之外工作,则 Buffer 将是未定义的

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();

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

    reader.onerror = reject;

    reader.readAsArrayBuffer(file);
  })
}

const readURL = async (input) => {
  try {
    const file = input.files[0]; // this is where your file data is
    console.log(file.name);
    let contentBuffer = await readFileAsync(file);
    console.log(contentBuffer.byteLength); // Length in ArrayBuffer
  } catch (error) {
    console.log(error);
  }
}
<input type='file' id="upload" onchange="readURL(this)" />