Rumah > Artikel > hujung hadapan web > Bolehkah vue mengendalikan fail tempatan?

Bolehkah vue mengendalikan fail tempatan?

藏色散人asal: 2023-01-05 15:45:333160semak imbas

vue boleh mengendalikan fail setempat Kaedah operasinya ialah: 1. Gunakan "XMLHttpRequest" untuk membaca fail setempat 2. Gunakan teg "input" untuk memuat naik fail, dan kemudian gunakan objek "FileReader" dan asynchronous. api , baca data dalam fail.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Bolehkah vue mengendalikan fail tempatan?

Ya.

Projek Vue memaparkan kandungan dengan membaca kandungan fail tempatan

Keperluan:

Projek syarikat perlu melaksanakan tajuk projek yang ditentukan pelanggan sebelum log masuk. Memandangkan anda belum melog masuk lagi, anda pasti tidak boleh mengkonfigurasinya melalui sistem pengurusan bahagian belakang.
Cara pertama yang terlintas di fikiran ialah memaparkan kandungan tajuk dengan membaca kandungan fail setempat.
Apabila pelanggan perlu menukar tajuk, mereka boleh mengubah suai kandungan fail setempat secara terus.

Terdapat dua cara untuk melaksanakan

untuk membaca fail setempat Yang pertama ialah menggunakan XMLHttpRequest, dan yang kedua ialah menggunakan input type=file to Fail dimuat naik dahulu dan kemudian dibaca.

Yang pertama:

Gunakan XMLHttpRequest untuk membaca fail setempat Perlu diingat bahawa format dokumen HTML mesti konsisten dengan tetapan format bacaan dalam strim. Konsisten, kodnya adalah seperti berikut:

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
  },}

Mula-mula buat fungsi readFile yang membaca kandungan fail Melalui objek XMLHttpRequest, baca fail dalam laluan yang ditentukan, tentukan format sebagai teks/html. dan kembalikan kandungannya.
Kemudian panggil terus dan baca kandungan fail dalam fungsi cangkuk yang dicipta bagi komponen log masuk, dan tetapkan ia kepada atribut tajuk yang perlu dipaparkan.

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

Keperluan projek ini diselesaikan menggunakan penyelesaian ini.

Jenis kedua:

Muat naik fail menggunakan teg input, dan kemudian gunakan objek FileReader dan api tak segerak yang disediakan oleh h5 untuk membaca data dalam fail itu.

<!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>

Pembelajaran yang disyorkan: "tutorial video vue"

Atas ialah kandungan terperinci Bolehkah vue mengendalikan fail tempatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html 对象异步 input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Adakah vue mempunyai kolon?Artikel seterusnya：Adakah vue mempunyai kolon?

Artikel berkaitan

Lihat lagi