HTML5 file对象和blob对象的互相转换

前端文件上传与Base64转换

原创已于 2022-02-13 11:51:46 修改 · 6.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

于 2022-02-12 19:44:12 首次发布

javaScript 专栏收录该内容

30 篇文章

订阅专栏

这篇博客介绍了在前端项目中如何处理文件上传，并将File对象转换为Base64格式。通过监听input[type='file']的change事件获取file对象，然后使用FileReader的readAsDataURL方法读取文件为DataURL。在转换完成后，可以将dataURL还原为Blob对象，并进一步转化为File对象，以满足后端接口的需求。博客详细阐述了FileReader的使用方法和相关API。

前端项目中进行文件上传的时候，通常都会使用 input 标签 type="file"时，监听他的 change 事件，当内容改变的时候，通过事件对象可以获取上传上来的 file 对象，但是我们的后端接口可能需要的是转换 base64 格式的数据，那么此时就要对 file 对象进行格式转换

使用FileReader 对象转换：File >>> DataURL

该对象用于读取文件（读取单个对象文件，所以，不能直接读取 Filelist 对象文件集合），即把文件内容读入内存。它接收 File 对象或 Blob 对象，作为参数。

生成该对象的构造函数方法如下：

  var reader = new FileReader(); // 参数为 Blob 对象或 File 对象

对于不同类型的文件，FileReader 使用不同的方法读取。方法如下：

readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。
readAsText(Blob|File, opt_encoding) ：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于 Base64 编码的 data-uri 对象。
readAsArrayBuffer(Blob|File) ：返回一个 ArrayBuffer（数组缓存）对象。
abort()：该方法用于中止文件上传。

在这里插入图片描述

下面是获取上传对象的文本内容的方法：

    var reader = new FileReader();
    reader.onload = function(e){
        // target.result 该属性表示目标对象的DataURL
        console.log(e.target.result);
    }
    // 传入一个参数对象即可得到基于该参数对象的文本内容
    reader.readAsDataURL(file);

console.log(e) 看看事件对象里面内容，里面就有转换后的 dataURL 格式
在这里插入图片描述

将dataurl转换为Blob对象

    let arr = e.target.result.split(',')
    let data = window.atob(arr[1])
    let mime = arr[0].match(/:(.*?);/)[1]
    let ia = new Uint8Array(data.length)
    for (var i = 0; i < data.length; i++) {
      ia[i] = data.charCodeAt(i)
    }
    this.blob = new Blob([ia], {type: mime})

利用File Api讲blob转成File对象

    let files = new window.File([this.blob], file.name, {type: file.type})
	// 前两个参数是必填