介绍 file(文件流)、bolb(本地流)、base64(二进制流)

file

File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

通常情况下， File 对象是来自用户在一个 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

blob

Blob 对象表示一个不可变、原始数据的类文件对象。指向的是本地的临时地址，Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

base64

Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。如果是图片的base64，可以是可以用来压缩。

base64转file

1
2
3
4
5
6
7
8
9
10
11
function base64ToFile(dataurl, filename) {
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, {type: mime})
}

base64转blob

1
2
3
4
5
6
7
8
9
10
11
function base64toBlob(dataurl) {
    var arr = dataurl.split(','), 
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new Blob([u8arr], { type: mime })
}

blob转base64

1
2
3
4
5
function blobToBase64(blob, callback) {
    let reader = new FileReader()
    reader.onload = function (e) { callback(e.target.result); }
    reader.readAsDataURL(blob)
}

blob转file

1
2
3
4
5
6
7
8
9
10
11
12
// 方法一
function blobToFile(blob, fileName, type) {
    let files = new window.File([blob], fileName, {type: type})
    return files
}

// 方法二
function blobToFile(blob, fileName){
    blob.lastModifiedDate = new Date()
    blob.name = fileName
    return blob
}

file转bse64

1
2
3
4
5
6
7
function fileToBase64（file）{
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function (e) {  
        return e.target.result
    }
}

转自：https://www.jb51.net/article/246673.htm