Shulou(Shulou.com)06/03 Report--

Editor to share with you vue how to read the contents of the file, 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 understand it!

Vue method to read the contents of the file: 1, to create a test.properties test content; 2, through the "readTestFile () {const file = this.loadFile ('test.properties')...}" method to read the contents of the file.

This article operating environment: windows7 system, vue/cli 4.3.1&&ultimate 2019.1&&nodev12.16.2 version, DELL G3 computer.

Tips before viewing:

The IDEA version used in this article is ultimate 2019.1 MagneNode version v12.16.2 Magnevue version @ vue/cli 4.3.1.

In the process of project development, you need to read the configuration and other files at the front end of the vue.

1. Example

My local files are placed in the public folder in the vue project

Test.properties

Content= test content

Read the contents of the file in the vue file

/ / read test.propertiesreadTestFile () {const file = this.loadFile ('test.properties') console.info (file) console.log (this.unicodeToUtf8 (file))}, / / read file loadFile (name) {const xhr = new XMLHttpRequest () const okStatus = _ document.location.protocol = =' file:'? 0: 200 xhr.open ('GET', name, false) xhr.overrideMimeType (' text/html) Charset=utf-8') / / defaults to utf-8 xhr.send (null) return xhr.status = okStatus? Xhr.responseText: null}, / / unicode to utf-8 unicodeToUtf8 (data) {data = data.replace (/\\ / g,'%') return unescape (data)}

The running result is as follows

two。 Problems that may be encountered

2.1. Parsed files are garbled

The method of reading a file, reading the file in utf-8 form, it is recommended to modify the file format and save it to utf-8 encoding, or change the reading format

Xhr.overrideMimeType ('text/html;charset=utf-8') / / defaults to utf-8

2.2. Read Chinese as unicode code

Since properties stores unicode code in Chinese, it needs to be processed in the background or front end.

/ / unicode to utf-8unicodeToUtf8 (data) {data = data.replace (/\ / / g,'%') return unescape (data)} above is all the contents of the article "how vue reads the contents of a file". 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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.