將數據文件轉換為 blob

Question

如何獲得一團？

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

Answer 1

正如評論中所指出的， 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>

Answer 2

文件對象是 Blob 的實例，但 Blob 對象不是 File 的實例

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 對象。 請參閱下面的示例。

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

正如@bgh 所指出的，您還可以使用 File 對象的 arrayBuffer 方法。 請參閱下面的示例。

let file = new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'});
//or let file = document.querySelector('input[type=file]').files[0];

file.arrayBuffer().then((arrayBuffer) => {
    let blob = new Blob([new Uint8Array(arrayBuffer)], {type: file.type });
    console.log(blob);
});

如果您的環境支持 async/await，您可以使用如下所示的單行代碼

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

Answer 3

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