Question

如何获得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);
}

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的实例

if (event.target.value) {
    const role = [];
    role.push(event.target.value);
}

如果必须将文件对象转换为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

Answer 3

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

将数据文件转换为blob

3 个答案: