将数据文件转换为blob

Convert data file to blob

本文关键字：blob 转换 文件 数据      更新时间：2023-09-26

如何获取blob？

HTML:

<input type="file" onchange="previewFile()">

JavaScript:

function previewFile() {
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  // Get blob?
  console.log(file);
}

如注释所示，file是blob:

file instanceof Blob; // true

您可以通过文件阅读器API获取其内容https://developer.mozilla.org/en/docs/Web/API/FileReader

阅读更多：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

var input = document.querySelector('input[type=file]');
var textarea = document.querySelector('textarea');
function readFile(event) {
  textarea.textContent = event.target.result;
  console.log(event.target.result);
}
function changeFile() {
  var file = input.files[0];
  var reader = new FileReader();
  reader.addEventListener('load', readFile);
  reader.readAsText(file);
}
input.addEventListener('change', changeFile);
<input type="file">
<textarea rows="10" cols="50"></textarea>

文件对象是Blob的实例，但Blob对象不是文件的实例

new File([], 'foo.txt').constructor.name === 'File' //true
new File([], 'foo.txt') instanceof File // true
new File([], 'foo.txt') instanceof Blob // true
new Blob([]).constructor.name === 'Blob' //true
new Blob([]) instanceof Blob //true
new Blob([]) instanceof File // false
new File([], 'foo.txt').constructor.name === new Blob([]).constructor.name //false

如果必须将文件对象转换为blob对象，则可以使用文件的数组缓冲区创建新的blob对象。请参阅下面的示例。

const file = new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'});
//or const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = function(e) {
    const blob = new Blob([new Uint8Array(e.target.result)], {type: file.type });
    console.log(blob);
};
reader.readAsArrayBuffer(file);

正如@bgh所指出的，您还可以使用File对象的arrayBuffer方法。请参阅下面的示例。

const file = new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'});
//or const file = document.querySelector('input[type=file]').files[0];
file.arrayBuffer().then((arrayBuffer) => {
    const blob = new Blob([new Uint8Array(arrayBuffer)], {type: file.type });
    console.log(blob);
});

如果您的环境支持async/await，您可以使用下面这样的一行代码

const fileToBlob = async (file) => new Blob([new Uint8Array(await file.arrayBuffer())], {type: file.type });
console.log(await fileToBlob(new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'})));

async function FileToString (file) {
    try {
        let res = await file.raw.text();
        console.log(res);
    } catch (err) {
        throw err;
    }
}
相关文章：