Comment implémenter la fonction de téléchargement de fichiers dans Vue ?

Vue est actuellement l'un des frameworks les plus populaires pour le développement front-end, et sa manière d'implémenter la fonction de téléchargement de fichiers est également très simple et élégante. Cet article expliquera comment implémenter la fonction de téléchargement de fichiers dans Vue.

1. Partie HTML

Ajoutez le code suivant dans le fichier HTML pour créer le formulaire de téléchargement :

<template>
  <div>
    <form ref="uploadForm" 
          enctype="multipart/form-data" 
          class="upload-form" 
          @submit.prevent="submitFile">
      <input type="file" 
             name="file" 
             id="file" 
             class="input-file"
             ref="file"
             @change="handleFileChange" />
      <label for="file" class="btn">选择文件</label>
      <!-- 进度条展示 -->
      <p v-if="showProgress">上传进度：{{ percent }} %</p>
      <button type="submit" 
              class="upload-btn" 
              :disabled="!selectedFile">上传</button>
    </form>
  </div>
</template>

Dans le code ci-dessus, utilisez le formulaire et les balises d'entrée pour créer le formulaire de téléchargement. L'attribut name dans le formulaire de téléchargement spécifie le nom du champ du fichier dans le formulaire. L'attribut enctype indique le type de fichier à télécharger. Le type multipart/form-data est utilisé ici.

Utilisez l'événement @click.prevent dans la balise label pour déclencher l'événement click de la balise d'entrée pour faire apparaître la boîte de sélection de fichier. L'événement @change ici peut écouter la sélection de fichier et appeler la méthode handleFileChange pour mettre à jour le nom du fichier dans le formulaire.

2. Partie JavaScript

Dans le fichier JavaScript, nous devons utiliser le composant personnalisé de Vue.js et la bibliothèque axios pour implémenter le téléchargement de fichiers.

<script>
import axios from 'axios';

export default {
  data () {
    return {
      selectedFile: null,  // 选中的文件
      showProgress: false,  // 是否展示上传进度条
      percent: 0,    // 上传进度百分比
    }
  },
  methods: {
    handleFileChange (event) {
      this.selectedFile = event.target.files[0];
    },
    submitFile () {
      if (!this.selectedFile) return;
      // 新建 from 对象
      const formData = new FormData();
      formData.append('file', this.selectedFile, this.selectedFile.name);

      this.showProgress = true;
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          // 计算上传进度百分比
          this.percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      };
      axios.post('/api/upload', formData, config)
        .then((response) => {
          console.log(response);
          this.showProgress = false;  // 移除 progress 条
        })
        .catch((error) => {
          console.log(error);
          this.showProgress = false;
        });
    },
  },
};
</script>

Définissez les méthodes handleFileChange() et submitFile() dans les méthodes pour gérer la sélection et le téléchargement de fichiers :

• La méthode handleFileChange écoute l'événement de sélection de fichier et stocke le fichier sélectionné.
• La méthode submitFile détermine si le fichier sélectionné existe, et renvoie directement s'il n'existe pas. Utilisez new FormData() pour construire un formulaire et ajoutez le fichier sélectionné au formulaire via la méthode append. Notez que le troisième paramètre est le nom du fichier. axios.post spécifie l'API pour le téléchargement de fichiers via des paramètres de chaîne. Les données demandées pour le téléchargement sont l'objet formData. L'attribut Content-Type dans Headers spécifie le type de données multipart/form-data est utilisé ici, et le téléchargement est. surveillé via l’événement onUploadProgress afin d’obtenir un affichage dynamique de la barre de progression.

Dans le code ci-dessus, nous utilisons la bibliothèque axios pour terminer l'opération de téléchargement de fichiers. Ajoutez la dépendance d'axios dans le fichier package.json du projet front-end :

"axios": "^0.19.2"

Introduisez-la et utilisez-la via import axios from 'axios' ;. Dans l'API backend, utilisez la bibliothèque Multer pour gérer les téléchargements de fichiers. Multer est une bibliothèque Node.js qui gère les téléchargements de fichiers. Multer peut traiter les fichiers et les envoyer avec le formulaire.

3. La partie API backend

const express = require('express');
const multer = require('multer');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    const error = new Error('Please upload a file');
    error.httpStatusCode = 400;
    return next(error);
  }
  // 文件重命名
  const oldPath = file.path;
  const newPath = 'uploads/' + file.originalname;
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      console.error(err);
    }
  });
  res.send('File uploaded successfully');
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

spécifie le nom du champ du fichier téléchargé via la méthode unique de Multer. Multer fournit également d'autres méthodes pour les opérations telles que le téléchargement multi-fichiers et les restrictions de type de fichier. Une fois le téléchargement terminé, nous déplacerons le fichier du chemin initial vers le répertoire de téléchargement. L'opération de renommage du fichier peut rendre le nom unique et éviter l'écrasement en téléchargeant des noms de fichiers différents.

Dans le code ci-dessus, nous avons utilisé la bibliothèque express pour créer une application serveur Node.js. Ajoutez les dépendances suivantes au fichier package.json dans le projet en arrière-plan :

"express": "^4.17.1",
"multer": "^1.4.2"

Utilisez l'instruction import / require pour introduire et utiliser le module correspondant.

4. Gestion des exceptions

Pendant le processus de téléchargement de fichiers, des situations anormales peuvent survenir, telles qu'une taille de fichier dépassant la limite, un type de fichier non autorisé, un délai d'attente du réseau, une erreur de serveur et d'autres facteurs. Nous devons écrire le client et le service correspondant. gestionnaire d'exceptions à la fin.

Dans la partie client, puisque nous utilisons la bibliothèque axios, nous pouvons directement utiliser les méthodes then et catch pour traiter l'objet Promise renvoyé par la demande de téléchargement, et gérer les opérations lorsque le téléchargement réussit et échoue respectivement. Dans le code fourni dans cet article, nous utilisons Promise.catch() pour gérer les exceptions lors de l'exécution du processus. Côté serveur, différentes exceptions nécessitent un traitement différent en fonction de la situation réelle.

5. Résumé

Dans cet article, nous avons présenté comment utiliser Vue.js pour terminer l'opération de téléchargement de fichiers, y compris la sélection de fichiers frontaux et l'affichage dynamique de la barre de progression pendant le processus de téléchargement, ainsi que l'écriture de Les API en arrière-plan et, en même temps, les problèmes possibles lors du processus de téléchargement. Les exceptions survenues ont été traitées.

La fonction de téléchargement de fichiers est une fonctionnalité indispensable dans de nombreuses applications Web. L'utilisation de la bibliothèque axios et de la bibliothèque Multer dans Vue.js peut réaliser un processus de téléchargement simple et élégant.

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!