HTML5 file对象和blob对象的互相转换
file 对象格式转换
·
前端项目中进行文件上传的时候,通常都会使用 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})
// 前两个参数是必填
更多推荐
已为社区贡献5条内容
所有评论(0)