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 "".

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 .

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!