FileReader 和Blob File文件对象(附formData初始化方法);

一、FileReader为读取文件对象 。

api  地址   相关demo

现在只讨论  readAsArrayBuffer,readAsBinaryString,readAsDataURL,readAsText。其他方法暂时不讨论。

1.readAsDataURL(blob)读取base64数据,供img src属性使用,不过只适用小体积图片;大体积图片还是使用URL.createObjectURL(blob:Blob)生成一个内存地址使用更方便,需要记得在不适用此内存地址后记得使用URL.revokeObjectURL(url:string)释放掉;

2.readAsText(blob[, encoding]);第二个参数为  编码格式,默认为“utf-8”;

3.readAsArrayBuffer:与readAsBinaryString类似,readAsArrayBuffer方法会按字节读取文件内容,并转换为ArrayBuffer对象。
我们可以关注下文件读取后大小,与原文件大小一致。

4.readAsBinaryString:按字节读取文件,但由于读取后的内容被编码为字符,大小会受到影响,故不适合直接传输,也不推荐使用。(w3c亦不推荐使用),其数据可以通过xml.sendAsBinary(string) 传输到后台,传输之前浏览器会对此数据进行解析(w3c已不推荐使用此方式传输二进制文件,使用send()代替);

5.复制File对象方法

   
var file = new File(["哈哈,傻逼看看为什么要数组"], "aa.txt", {
type: 'text/plain'
});
var file2 = new File([file],"aa2.txt",{
type:'text/plain'
})
console.log(file,file2,file == file2);
var fileReader = new FileReader();
fileReader.onload = function (evt) {
var text = evt.target.result;
console.log(1,text);
}
fileReader.readAsText(file,"utf-8");
var fileReader2 = new FileReader();
fileReader2.onload = function (evt) {
var text = evt.target.result;
console.log(2,text);
}
fileReader2.readAsText(file2,"utf-8");

 6.canvas导出为file对象canvas.mozGetAsFile(name, type)。兼容性不好,只有火狐支持。。。

7.创建File对象api

附:formData初始化方法



原文地址:https://www.cnblogs.com/iroading/p/11207308.html