Home > Article > Web Front-end > Can vue operate local files?
vue can operate local files. The operation method is: 1. Use "XMLHttpRequest" to read local files; 2. Use the "input" tag to upload files, and then use the "FileReader" object and asynchronous api , read the data in the file.
#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.
Can vue operate local files?
Can.
The Vue project displays the content by reading the local file content
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.
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.
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.
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.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<span>点击上传：</span> <input type="file" id="files1" onchange="uploadFile1()">
<br>
<span>点击上传2：</span> <input type="file" id="files2" onchange="uploadFile2(event)">
<script>
function uploadFile1() {
const selectedFile = document.getElementById('files1').files[0]
// 读取文件名
const name = selectedFile.name // 读取文件大小
const size = selectedFile.size // FileReader对象，h5提供的异步api，可以读取文件中的数据。
const reader = new FileReader()
// readAsText是个异步操作，只有等到onload时才能显示数据。
reader.readAsText(selectedFile)
reader.onload = function () {
//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
console.log(this.result);
}
}
function uploadFile2(e) {
const selectedFile = e.target.files[0]
const reader = new FileReader()
// 文件内容载入完毕之后的回调。
reader.onload = function(e) {
console.log(e.target.result)
}
reader.readAsText(selectedFile)
}
</script>
</body></html>
Recommended learning: "vue video tutorial"The above is the detailed content of Can vue operate local files?. For more information, please follow other related articles on the PHP Chinese website!