Wie implementiert man die Datei-Upload-Funktion in Vue?

Vue ist derzeit eines der beliebtesten Frameworks für die Frontend-Entwicklung und auch die Implementierung der Datei-Upload-Funktion ist sehr einfach und elegant. In diesem Artikel wird erläutert, wie Sie die Funktion zum Hochladen von Dateien in Vue implementieren.

1. HTML-Teil

Fügen Sie den folgenden Code in die HTML-Datei ein, um das Upload-Formular zu erstellen:

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

Verwenden Sie im obigen Code Formular- und Eingabe-Tags, um das Upload-Formular zu erstellen. Das Namensattribut im Upload-Formular gibt den Feldnamen der Datei im Formular an. Das enctype-Attribut gibt den Typ der hochzuladenden Datei an. Hier wird der Typ multipart/form-data verwendet.

Verwenden Sie das @click.prevent-Ereignis im Label-Tag, um das Klickereignis des Eingabe-Tags auszulösen und das Dateiauswahlfeld aufzurufen. Das @change-Ereignis hier kann die Dateiauswahl abhören und die handleFileChange-Methode aufrufen, um den Dateinamen im Formular zu aktualisieren.

2. JavaScript-Teil

In der JavaScript-Datei müssen wir die benutzerdefinierte Komponente von Vue.js und die Axios-Bibliothek verwenden, um den Datei-Upload zu implementieren.

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

Definieren Sie die Methoden „handleFileChange()“ und „submitFile()“ in Methoden zur Handhabung der Dateiauswahl und des Hochladens:

• Die Methode „handleFileChange“ hört auf das Dateiauswahlereignis und speichert die ausgewählte Datei.
• Die Methode „submitFile“ ermittelt, ob die ausgewählte Datei vorhanden ist, und gibt direkt zurück, wenn sie nicht vorhanden ist. Verwenden Sie new FormData(), um ein Formular zu erstellen, und hängen Sie die ausgewählte Datei über die Append-Methode an das Formular an. Beachten Sie, dass der dritte Parameter der Dateiname ist. axios.post gibt die API zum Hochladen von Dateien über String-Parameter an. Das Content-Type-Attribut in Headers gibt den Datentyp an, der hier verwendet wird Der Fortschritt wird über das Ereignis onUploadProgress überwacht, um eine dynamische Anzeige des Fortschrittsbalkens zu erreichen.

Im obigen Code verwenden wir die Axios-Bibliothek, um den Datei-Upload-Vorgang abzuschließen. Fügen Sie die Abhängigkeit von Axios in der Datei package.json des Front-End-Projekts hinzu:

"axios": "^0.19.2"

Einführen und verwenden Sie sie durch Importieren von Axios aus „Axios“;. Verwenden Sie in der Backend-API die Multer-Bibliothek, um Datei-Uploads zu verarbeiten. Multer ist eine Node.js-Bibliothek, die Datei-Uploads verarbeitet. Multer kann Dateien verarbeiten und zusammen mit dem Formular senden.

3. Der Backend-API-Teil

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}`);
});

gibt den Feldnamen der hochgeladenen Datei über die Einzelmethode von Multer an. Multer bietet auch andere Methoden für das Hochladen mehrerer Dateien und Dateitypbeschränkungen. Nachdem der Upload abgeschlossen ist, verschieben wir die Datei vom ursprünglichen Pfad in das Upload-Verzeichnis. Durch die Dateiumbenennung kann der Name eindeutig gemacht werden und ein Überschreiben durch das Hochladen anderer Dateinamen vermieden werden.

Im obigen Code haben wir die Express-Bibliothek verwendet, um eine Node.js-Serveranwendung zu erstellen. Fügen Sie der Datei package.json im Hintergrundprojekt die folgenden Abhängigkeiten hinzu:

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

Verwenden Sie die Import-/Require-Anweisung, um das entsprechende Modul einzuführen und zu verwenden.

4. Ausnahmebehandlung

Während des Datei-Upload-Vorgangs können ungewöhnliche Situationen auftreten, z. B. eine Dateigröße, die den Grenzwert überschreitet, ein nicht zulässiger Dateityp, ein Netzwerk-Timeout, ein Serverfehler und andere Faktoren. Wir müssen den entsprechenden Client und Dienst schreiben Ausnahmebehandler am Ende.

Da wir im Client-Teil die Axios-Bibliothek verwenden, können wir die Methoden then und Catch direkt verwenden, um das von der Upload-Anfrage zurückgegebene Promise-Objekt zu verarbeiten und die Vorgänge bei erfolgreichem bzw. fehlgeschlagenem Upload abzuwickeln. Im in diesem Artikel bereitgestellten Code verwenden wir Promise.catch(), um Ausnahmen während der Prozessausführung zu behandeln. Auf der Serverseite erfordern unterschiedliche Ausnahmen je nach tatsächlicher Situation eine unterschiedliche Behandlung.

5. Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie Sie mit Vue.js den Datei-Upload-Vorgang abschließen, einschließlich der Front-End-Dateiauswahl und der dynamischen Anzeige des Fortschrittsbalkens während des Upload-Vorgangs sowie des Schreibens von Hintergrund-APIs und gleichzeitig mögliche Probleme während des Upload-Vorgangs. Auftretende Ausnahmen wurden behandelt.

Die Datei-Upload-Funktion ist in vielen Webanwendungen eine unverzichtbare Funktion. Durch die Verwendung der Axios-Bibliothek und der Multer-Bibliothek in Vue.js kann ein einfacher und eleganter Upload-Prozess erreicht werden.

Das obige ist der detaillierte Inhalt vonWie implementiert man die Datei-Upload-Funktion in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!