reactJS windows.FileReader readAsArrayBuffer 方法错误

Question

reactJS 使用 drop-zone 接收文件并用字节缓冲区替换它们时出错

类型错误：第一个参数必须是字符串、缓冲区、ArrayBuffer、数组或类似数组的对象。

  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);
}

我该如何解决这个问题..请帮忙

Answer 1

嗨，伙计，你的代码中有几个问题，结帐：

我如何检索文件：函数参数 (this) 指的是调用方法的输入，而不是文件
FileReader API 只支持回调 如果你想使用 async/await 你必须将它包装在你自己的方法中 promise-managed
要知道缓冲区长度，您必须调用 ArrayBuffer.byteLength
此外，如果您没有使用任何库并且在 NODE 环境之外工作，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)" />

reactJS windows.FileReader readAsArrayBuffer 方法错误

reactJS windows.FileReader readAsArrayBuffer method error

javascript

io

filereader

reactjs