"."/> ".">
Home > Article > Web Front-end > How to read local files in vue
Vue's method of reading local files: 1. Get the local file through "function (name) {...}"; 2. Introduce it into the component and perform corresponding string processing; 3. Through Just loop through and bind the value in "this.iconList" to the class of "5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6".
The operating environment of this article: Windows 7 system, Vue version 2.9.6, DELL G3 computer
How does vue read local files?
Read local files in vue
Background
During the project development process, there is a need to dynamically set font icons to ensure that the icons The icons in the selection box are consistent with the last released project icon library.
Idea
Read the local font icon library file, and then perform the corresponding string conversion, so that the icons can be kept consistent
Steps
1. Obtain the local file
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.Introduce it into the component and perform corresponding string processing
import loadFile from '../assets/js/localFile';
Process the obtained file data
// 以.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 < icons.length; i++) { // 判断不为空 if (icons[i].indexOf(flag) > -1) { // 获取图标信息中的class部分,也就是:before之前的信息 let liList = icons[i].split(flag); // 将class添加到数组,最后再页面上进行循环输出 this.iconList.push(liList[0]); } }
Finally, through looping, bind the value in this.iconList to the class of 5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6.
Recommended learning: "The latest 5 vue.js video tutorial selections"
The above is the detailed content of How to read local files in vue. For more information, please follow other related articles on the PHP Chinese website!