Maison > Article > interface Web > Vue peut-il exploiter des fichiers locaux ?

Vue peut-il exploiter des fichiers locaux ?

藏色散人original: 2023-01-05 15:45:333106parcourir

vue peut gérer des fichiers locaux. La méthode de fonctionnement est la suivante : 1. Utilisez "XMLHttpRequest" pour lire les fichiers locaux ; 2. Utilisez la balise "input" pour télécharger des fichiers, puis utilisez l'objet "FileReader" et l'API asynchrone pour lire le fichier. fichiers.

L'environnement d'exploitation de ce tutoriel : système Windows 10, Vue version 3, ordinateur Dell G3.

Vue peut-elle exploiter des fichiers locaux ?

D'accord.

Le projet Vue affiche le contenu en lisant le contenu des fichiers locaux

Exigences :

Les projets d'entreprise doivent implémenter les titres de projet définis par le client avant de se connecter. Puisque vous n'êtes pas encore connecté, vous ne pouvez certainement pas le configurer via le système de gestion back-end.
La première façon qui vient à l'esprit est d'afficher le contenu du titre en lisant le contenu du fichier local.
Lorsque les clients ont besoin de changer le titre, ils peuvent directement modifier le contenu du fichier local.

Il existe deux façons de réaliser

la lecture de fichiers locaux. La première consiste à utiliser XMLHttpRequest et la seconde consiste à utiliser input type=file pour télécharger d'abord le fichier, puis le lire.

Le premier :

Utilisez XMLHttpRequest pour lire les fichiers locaux. Il est à noter que le format du document HTML doit être cohérent avec le paramètre de format de lecture dans le flux. Le code est le suivant :

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

Premier. créer une lecture La fonction readFile qui prend le contenu du fichier lit le fichier dans le chemin spécifié via l'objet XMLHttpRequest, le format est spécifié comme texte/html et renvoie le contenu.
Ensuite, appelez et lisez directement le contenu du fichier dans la fonction hook créée du composant de connexion, et attribuez-le à l'attribut title qui doit être affiché.

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

Les exigences de ce projet sont résolues grâce à cette solution.

Deuxième :

Téléchargez le fichier à l'aide de la balise d'entrée, puis utilisez l'objet FileReader, l'API asynchrone fournie par h5, pour lire les données du fichier.

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

Apprentissage recommandé : "tutoriel vidéo vue"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html 对象异步 input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Est-ce que vue a deux points ?Article suivant：Est-ce que vue a deux points ?

Articles Liés

Voir plus