Vue中图片,文档资源上传中FileReader的使用

使用场景:在vue项目中使用el-upload上传图片资源,文档或者excel时,需要读取文件,并将其转化为需要使用的文件格式,这就需要用到FileReader。

1.判断浏览器是否支持FileReader

1 if(window.FileReader) {
2     var fr = new FileReader();
3     // add your code here
4 }
5 else {
6     alert("Not supported by your browser!");
7 }

2.调用FileReader对象的方法

abort : 中断读取

readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容

readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。

readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3.FileReader读取时的钩子

事件描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

通常来说在文件读取完毕后,在onload中将文件转为所需格式

posted on 2021-11-15 15:43  还是种田踏实  阅读(1444)  评论(0编辑  收藏  举报