[英]Convert data file to 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 对象不是 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'})));
async function FileToString (file) {
try {
let res = await file.raw.text();
console.log(res);
} catch (err) {
throw err;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.