vue读取本地文件的方法：1、通过“function (name) {…}”获取本地的文件；2、在组件中引入并进行相应的字符串处理；3、通过循环将“this.iconList”里面的值绑定到“”的class即可。
本文操作环境：Windows7系统、Vue2.9.6版，DELL G3电脑
vue怎么读取本地文件？
vue中读取本地文件
背景
立即学习“前端免费学习笔记（深入）”；
再项目开发过程中，有动态设置字体图标的需求，保证图标选框中的图标和最后发布的项目图标库一致。
思路
读取本地字体图标库文件，然后进行相应的字符串转换，这样就可以保持图标的一致啦
步骤
1、获取本地的文件
const loadFile = function (name) { // name为文件所在位置 let xhr = new XMLHttpRequest(), okStatus = document.location.protocol === "file:" ? 0 : 200; xhr.open('GET', name, false); xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8 xhr.send(null); return xhr.status === okStatus ? xhr.responseText : null;}export default loadFile;
登录后复制
2、组件中引入并进行相应的字符串处理
import loadFile from '../assets/js/localFile';
登录后复制
处理获取到的文件数据
// 以.iconfont为节点分割字符串，只需要.iconfont之后的字符串 let iconData = loadFile('iconfont/iconfont.css').split('.iconfont')[1]; // 获取第一次出现'}'时候的索引值 let iconLi = iconData.indexOf('}'); // 得到第一次出现'}'之后的所有字符串信息【这部分就是我们需要的字体图标的信息】 let liList = iconData.substring(iconLi + 1, iconData.length-1); // 分割每个字体图标信息 let icons = liList.split('.'); // 设置分割标识 let flag = ':before'; // 循环获取到的字体图标数组 for (let i = 0; i -1) { // 获取图标信息中的class部分，也就是:before之前的信息 let liList = icons[i].split(flag); // 将class添加到数组，最后再页面上进行循环输出 this.iconList.push(liList[0]); } }
登录后复制
最后通过循环，将 this.iconList 里面的值绑定到 的 class 即可。
推荐学习：《最新的5个vue.js视频教程精选》
以上就是vue怎么读取本地文件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3019693.html
