js的File对象，Blob和file相互转换__js file对象

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

一、 Blob转成File

let blob = new Blob(['这里是要转换的字符串或者图片等'], { type: "text/plain;charset=utf-8" });
console.log("Blob对象", blob);
let file = new File([blob], 'test.jpg', { type: blob.type })
console.log("File对象", file);

js的File对象，Blob和file相互转换_Text

File()除了可以转换Blob外，还可以是一个包含ArrayBuffer，ArrayBufferView，或者 DOMString 对象的 Array — 或者任何这些对象的组合。

这是 UTF-8 编码的文件内容

二、File转成Blob

MDN FileReader()

MDN Blob()

<div class="upload">
   <input id="input" type="file" onchange="upload(this)">
</div>

function upload(e) {
    let file = e.files[0];
    console.log("File对象", file);
    fileToBlob(file)
}

function fileToBlob(file) {
    let reader = new FileReader();
    reader.addEventListener('load', (e) => {
        let base64 = e.target.result;
        let blob = new Blob([base64], { type: file.type });
        console.log("Blob对象", blob);
    })
    reader.readAsDataURL(file)
}

js的File对象，Blob和file相互转换_字符串_02

三、Blob转成text文本字符

let blob = new Blob(['挫折，永不言败。理想，永不止步。目标，永不停歇。命运，永不屈服。'], { type: "text/plain;charset=utf-8" });
console.log("Blob对象", blob);
blobToText(blob)

function blobToText(blob) {
    let reader = new FileReader();
    reader.addEventListener('load', (e) => {
        let text = e.target.result;
        console.log("Text内容：\n", text);
    })
    reader.readAsText(blob)
}

js的File对象，Blob和file相互转换_Text_03

转二进制用 FileReader.readAsBinaryString()

箴言： 因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。