Comment écrire du code pour le téléchargement par lots de vue

Ces dernières années, les frameworks front-end sont devenus l'outil de choix pour de nombreux développeurs front-end, parmi lesquels vue.js est privilégié par les développeurs pour sa courbe d'apprentissage facile et sa maintenance aisée. Dans vue.js, l'implémentation de la fonction de téléchargement de fichiers est l'une des exigences les plus courantes, et le téléchargement par lots est utilisé par divers sites Web. Alors, comment implémenter le téléchargement par lots dans vue.js ? Ce qui suit présentera en détail comment vue.js implémente les téléchargements par lots.

1. Téléchargement simple de fichiers

Avant d'introduire le téléchargement par lots, jetons un coup d'œil à l'implémentation simple du téléchargement de fichiers uniques dans vue.js. Supposons que le fichier que nous souhaitons télécharger est le suivant :

<input type="file" @change="handleFileUpload"/>

Ajoutez la fonction handleFileUpload dans les méthodes de vue.js pour gérer le téléchargement de fichiers :

handleFileUpload() {
  const file = event.target.files[0]; //获取文件对象
  const formData = new FormData(); //建立FormData对象
  formData.append('file', file); //将文件添加到FormData中
  axios.post('/file/upload', formData)//使用axios发送post请求上传文件
       .then(response => {
        console.log(response);//上传成功后的响应结果
       })
}

Dans ce code, nous utilisons la bibliothèque axios pour envoyer une demande de publication à télécharger le fichier, mais utiliser Toute autre bibliothèque ou ajax natif peut également être implémentée. Bien sûr, dans les projets réels, nous devrons peut-être utiliser un jeton d'authentification ou un jeton CSRF pour garantir la sécurité.

2. Téléchargement de fichiers multiples

Après avoir compris le téléchargement de fichiers uniques, présentons la méthode de vue.js pour implémenter le téléchargement de fichiers multiples. Ajoutez l'entrée de fichiers à sélection multiple en html :

<input type="file" ref="fileInput" @change="handleMultipleFileUpload" multiple>

Ajoutez ensuite la fonction handleMultipleFileUpload dans les méthodes :

handleMultipleFileUpload() {
  const files = this.$refs.fileInput.files;//获取上传的文件对象
  const formData = new FormData();//建立FormData对象
  for(let i=0 ;i<files.length ;i++){
    formData.append('files', files[i]);//将文件添加到FormData对象中
  }
  axios.post('/file/multiple_upload', formData)//发送post请求上传多个文件
       .then(response => {
         console.log(response);//上传成功后的响应结果
       })
}

Grâce à ce code, nous pouvons télécharger plusieurs fichiers Contrairement à un seul fichier, nous devons ajouter des fichiers dans l'objet formData dans. séquence. Je pense que vous pouvez déjà comprendre comment télécharger simplement plusieurs fichiers dans vue.js.

3. Implémenter le téléchargement multi-fichiers avec barre de progression

Cependant, la fonction de téléchargement multi-fichiers ci-dessus doit être encore étendue. Par exemple, si nous souhaitons afficher la barre de progression du téléchargement, au lieu de connaître l'état du téléchargement uniquement une fois le téléchargement réussi, nous devons utiliser l'objet XMLHttpRequest pour implémenter la barre de progression du téléchargement. Le code est le suivant :

handleMultipleFileUpload() {
    const files = this.$refs.fileInput.files;//获取上传的文件对象
    const formData = new FormData(); //建立FormData对象
    for(let i=0 ;i<files.length ;i++){
      formData.append('files', files[i]); //将文件添加到FormData对象中
    }
    const xhr = new XMLHttpRequest();//创建XMLHttpRequest对象实现进度条
    //upload.addEventListener用于上传进度监听
    xhr.upload.addEventListener("progress", function(evt){
      if(evt.lengthComputable){
        const percentComplete = Math.round(evt.loaded * 100 / evt.total);//计算上传进度
        console.log(`上传进度：${percentComplete}%`);
      }
    }, false);
    //ajax完成后触发的事件
    xhr.onreadystatechange=function(evt){
      if(xhr.readyState===4){//上传完成
        console.log(xhr.responseText);//上传完成后的响应结果
      }
    }
    //发送post请求上传文件
    xhr.open("POST", "/file/multiple_upload");
    xhr.send(formData);
  }

En fait, lorsque nous téléchargeons des fichiers spéciaux tels que des médias en streaming et de grandes quantités de fichiers, la méthode de téléchargement ci-dessus peut être limitée. Par conséquent, il est très nécessaire de comprendre les types de fichiers téléchargés, les restrictions de taille de fichier, la vitesse du réseau, les besoins des utilisateurs, etc., et de choisir la méthode de téléchargement correspondante.

Pour résumer, cet article présente la méthode de vue.js pour implémenter le téléchargement de fichiers uniques et le téléchargement de plusieurs fichiers, et réalise l'effet de la barre de progression du téléchargement via l'objet XMLHttpRequest. Je pense que ces méthodes peuvent vous aider à mieux remplir la fonction de téléchargement de fichiers. Dans le même temps, dans les projets réels, il est également nécessaire de réfléchir à la manière dont le serveur principal gère les fichiers téléchargés et à la manière d'éviter les fuites de fichiers, la falsification des données et d'autres problèmes connexes.

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!