How vue reads local files

Editor to share with you vue how to read local files, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Vue to read the local file method: 1, through the "function (name) {...}" access to the local file; 2, introduced in the component and the corresponding string processing; 3, through the loop "this.iconList" inside the value bound to the "" class.

This article operating environment: Windows7 system, Vue2.9.6 version, DELL G3 computer

How does vue read local files?

Read local files in vue

Background

In the process of project development, there is a need to set font icons dynamically to ensure that the icons in the icon box are consistent with the last released project icon library.

Train of thought

Read the local font icon library file, and then convert the corresponding strings, so that the icons can be kept consistent

Steps

1. Get local files

Const loadFile = function (name) {/ / name is the location of the file let xhr = new XMLHttpRequest (), okStatus = _ document.location.protocol = = "file:"? 0: 200; xhr.open ('GET', name, false); xhr.overrideMimeType ("text/html;charset=utf-8"); / / default is utf-8 xhr.send (null); return xhr.status = okStatus? Xhr.responseText: null;} export default loadFile

2. Introduce and deal with the corresponding string in the component

Import loadFile from'.. / assets/js/localFile'

Processing the acquired file data

/ / split the string with .iconfont as a node, only need the string let iconData = loadFile ('iconfont/iconfont.css'). Split (' .iconfont') [1] after .iconfont; / / get the index value let iconLi = iconData.indexOf ('}') when it first appears / / get all the string information after the first occurrence of'}'[this part is the font icon information we need] let liList = iconData.substring (iconLi + 1, iconData.length-1); / / split each font icon information let icons = font ('.') / / set the font icon array for (let I = 0; I) obtained by the let flag =': before'; / / loop

< icons.length; i++) { // 判断不为空 if (icons[i].indexOf(flag) >

-1) {/ / get the class part of the icon information, that is, the information before before let liList = icons [I] .split (flag); / / add class to the array, and finally loop output this.iconList.push (liList [0]) on the page }}

Finally, through the loop, you can bind the value in this.iconList to the class.

The above is all the contents of the article "how vue reads Local Files". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!