vue kann lokale Dateien bedienen: 1. Verwenden Sie „XMLHttpRequest“, um lokale Dateien zu lesen. 2. Verwenden Sie das „Input“-Tag, um Dateien hochzuladen, und verwenden Sie dann das „FileReader“-Objekt und die asynchrone API, um die Dateien zu lesen Dateien.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.
Kann Vue lokale Dateien bedienen?
Okay.
Das Vue-Projekt zeigt Inhalte durch Lesen lokaler Dateiinhalte an
Unternehmensprojekte müssen vor dem Anmelden kundendefinierte Projekttitel implementieren. Da Sie sich noch nicht angemeldet haben, können Sie es definitiv nicht über das Back-End-Verwaltungssystem konfigurieren.
Die erste Möglichkeit, die mir in den Sinn kommt, besteht darin, den Titelinhalt anzuzeigen, indem der lokale Dateiinhalt gelesen wird.
Wenn Kunden den Titel ändern müssen, können sie den Inhalt der lokalen Datei direkt ändern.
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
},}Zuerst Erstellen Sie eine Lesefunktion readFile, die den Dateiinhalt übernimmt, liest die Datei im angegebenen Pfad über das XMLHttpRequest-Objekt, das Format ist als text/html angegeben und gibt den Inhalt zurück.
Rufen Sie dann direkt den Dateiinhalt in der erstellten Hook-Funktion der Anmeldekomponente auf, lesen Sie ihn und weisen Sie ihn dem anzuzeigenden Titelattribut zu. created() {
this.getList()
this.title = this.readFile('../../../static/title.txt')
console.log(this.title)
},<!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>vue-Video-Tutorial
“Das obige ist der detaillierte Inhalt vonKann Vue lokale Dateien bedienen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
