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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/37134433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:58:29  来源:igfitidea点击:

Convert input=file to byte array

javascriptfilereader

提问by Lempkin

I try to convert a file that i get through an input file into a byte[]. I tried with a FileReader, but i must miss something :

我尝试将通过输入文件获得的文件转换为字节 []。我尝试使用 FileReader,但我必须错过一些东西:

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

But in the end, my bytes var doesn't content a byte array.

但最后,我的字节变量不满足字节数组。

I saw this post : Getting byte array through input type = filebut it doesn't ends with a byte[], and readAsBinaryString() is deprecated

我看到了这篇文章:通过输入类型 = 文件获取字节数组,但它不以字节 [] 结尾,并且不推荐使用 readAsBinaryString()

What do i miss?

我想念什么?

回答by Santosh Ch

Faced a similar problem and its true the 'reader.result' doesn't end up as 'byte[]'. So I have cast it to Uint8Array object. This too is not a perfect 'byte[]' ,so I had to create a 'byte[]' from it. Here is my solution to this problem and it worked well for me.

面临类似的问题,并且确实如此,'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' is what you are looking for. Saw the comments and seems you did the same, still wanted to share the approach.

'fileByteArray' 就是你要找的。看到评论,似乎你也做了同样的事情,仍然想分享这个方法。

回答by vapcguy

Seems to me you just want to get files into an array? How about these functions - one where you can read it as text, another as a base64 byte string, and if you really want the readAsArrayBufferarray buffer output, I've included that, too:

在我看来您只是想将文件放入数组中?这些函数怎么样 - 一个你可以将它作为文本读取,另一个作为 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>