Can vue operate local files?

Requirements:

Company projects need to implement customer-defined project titles before logging in. Since you haven't logged in yet, you definitely can't configure it through the back-end management system.
The first way that comes to mind is to display the title content by reading the content of the local file.
When customers need to change the title, they can directly modify the content of the local file.

There are two ways to implement

to read local files. The first is to use XMLHttpRequest, and the second is to use input type=file to The file is uploaded first and then read.

First type:

Use XMLHttpRequest to read local files. It is worth noting that the format of the HTML document must be consistent with the reading format setting in the stream. Consistent, the code is as follows:

methods: { readFile(filePath) { // 创建一个新的xhr对象 let xhr = null if (window.XMLHttpRequest) { xhr = new XMLHttpRequest() } else { // eslint-disable-next-line xhr = new ActiveXObject('Microsoft.XMLHTTP') } const okStatus = document.location.protocol === 'file' ? 0 : 200 xhr.open('GET', filePath, false) xhr.overrideMimeType('text/html;charset=utf-8') xhr.send(null) return xhr.status === okStatus ? xhr.responseText : null },}

First create a function readFile that reads file content. Through the XMLHttpRequest object, read the file in the specified path, specify the format as text/html, and return the content.
Then directly call and read the file content in the created hook function of the login component, and assign it to the title attribute that needs to be displayed.

created() { this.getList() this.title = this.readFile('../../../static/title.txt') console.log(this.title) },

The requirements of this project are solved using this solution.

Second type:

Upload the file using the input tag, and then use the FileReader object and the asynchronous api provided by h5 to read the data in the file.

      
  点击上传：  
 点击上传2：