前端读取导入的文件内容

2024-08-30
40 阅读

需求:

我们在导入数据文件的时候需要读取到文件的内容并将内容数据渲染echart中

案例:以vue-element-ui中的el-upload为例

代码如下:

分析:方法中file即上传文件的所有信息,在本案例中我们使用的是FileReader对象,它是一个异步文件读取机制

FileReader提供了如下方法:(注:如果传file有报错的的话尝试file.raw即可)

readAsArrayBuffer(file)? ?//按字节读取文件内容,结果用ArrayBuffer对象表示

readAsBinaryString(file) //按字节读取文件内容,结果为文件的二进制串

readAsDataURL(file)? ?//读取文件内容,结果用data:url的字符串形式表示? ? 注意不是路径地址

场景应用:可以做一些图片的预览,将图片

readAsText(file,encoding)//按字符读取文件内容,结果用字符串形式表示

abort()//终止文件读取操作

事件:

分享至:
管理员

小草

专注人工智能、前沿科技领域报道,致力于为读者带来最新、最深度的科技资讯。

评论 (0)

当前用户头像