将输入=文件转换为字节数组

Question

我尝试将通过输入文件获得的文件转换为字节[]。 我尝试使用 FileReader，但我一定错过了一些东西：

var bytes = [];
var reader = new FileReader();
reader.onload = function () {
   bytes = reader.result;
};
reader.readAsArrayBuffer(myFile);

但最终，我的 bytes var 不包含字节数组。

我看到了这篇文章：通过输入类型=文件获取字节数组但它不以byte[]结尾，并且readAsBinaryString()已被弃用

我想念什么？

Answer 1

面临类似的问题，确实“reader.result”最终没有成为“byte[]”。所以我将它转换为 Uint8Array 对象。这也不是一个完美的“byte[]”，所以我必须从中创建一个“byte[]”。这是我对这个问题的解决方案，它对我来说效果很好。

var reader = new FileReader();
var fileByteArray = [];
reader.readAsArrayBuffer(myFile);
reader.onloadend = function (evt) {
    if (evt.target.readyState == FileReader.DONE) {
       var arrayBuffer = evt.target.result,
           array = new Uint8Array(arrayBuffer);
       for (var i = 0; i < array.length; i++) {
           fileByteArray.push(array[i]);
        }
    }
}

'fileByteArray' 就是您正在寻找的。看到评论，看来你也做了同样的事情，仍然想分享这个方法。

Answer 2

在我看来你只是想将文件放入数组中？这些函数怎么样 - 一个可以将其读取为文本，另一个可以读取为 base64 字节字符串，如果您确实想要

readAsArrayBuffer

数组缓冲区输出，我也将其包括在内：

document.getElementById("myBtn").addEventListener("click", function() {
  uploadFile3();
}); 

var fileByteArray = [];

function uploadFile1(){
  var files = myInput.files[0];
  var reader = new FileReader();
  reader.onload = processFile(files);
  reader.readAsText(files); 
}

function uploadFile2(){
  var files = document.querySelector('input').files[0];
  var reader = new FileReader();
  reader.onload = processFile(files);
  reader.readAsDataURL(files); 
}

function uploadFile3(){
  var files = myInput.files[0];
  var reader = new FileReader();
  reader.onload = processFile(files);
  reader.readAsArrayBuffer(files); 
}

function processFile(theFile){
  return function(e) { 
    var theBytes = e.target.result; //.split('base64,')[1]; // use with uploadFile2
    fileByteArray.push(theBytes);
    document.getElementById('file').innerText = '';
    for (var i=0; i<fileByteArray.length; i++) {
        document.getElementById('file').innerText += fileByteArray[i];
    }
  }
}

<input id="myInput" type="file">    
<button id="myBtn">Try it</button>
<span id="file"></span>

Answer 3

这对我来说在 React JS 中非常有效：

 const handleUpload = async (e) => {
    let image = e.currentTarget.files[0];
    const buffer = await image.arrayBuffer();
    let byteArray = new Int8Array(buffer);
    console.log(byteArray)
    formik.setFieldValue(name, byteArray);
}

Answer 4

这是已接受答案的修改版，在我看来更简单的版本。该函数返回一个值为 byte[] 的 Promise。

function fileToByteArray(file) {
    return new Promise((resolve, reject) => {
        try {
            let reader = new FileReader();
            let fileByteArray = [];
            reader.readAsArrayBuffer(file);
            reader.onloadend = (evt) => {
                if (evt.target.readyState == FileReader.DONE) {
                    let arrayBuffer = evt.target.result,
                        array = new Uint8Array(arrayBuffer);
                    for (byte of array) {
                        fileByteArray.push(byte);
                    }
                }
                resolve(fileByteArray);
            }
        }
        catch (e) {
            reject(e);
        } 
    })
}

这样你就可以像这样在异步函数中简单地调用这个函数

async function getByteArray() {
    //Get file from your input element
    let myFile = document.getElementById('myFileInput').files[0];

    //Wait for the file to be converted to a byteArray
    let byteArray = await fileToByteArray(myFile);

    //Do something with the byteArray
    console.log(byteArray);
}

Answer 5

  async function getAsByteArray(file) {
    return new Uint8Array(await readFile(file));
  }

  function readFile(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.addEventListener("loadend", (e) => resolve(e.target.result));
      reader.addEventListener("error", reject);
      reader.readAsArrayBuffer(file);
    });
  }
  const handleFileChange = async (file) => {
    const byteFile = await getAsByteArray(file);
  };