Analyse von Vue und serverseitiger Kommunikation: So implementieren Sie die Wiederaufnahme eines Haltepunkts

Anatomie der Kommunikation zwischen Vue und dem Server: So implementieren Sie die Wiederaufnahme von Haltepunkten

In der Front-End-Entwicklung ist Vue.js ein sehr beliebtes JavaScript-Framework, das eine leichte und benutzerfreundliche Methode zum Erstellen interaktiver Elemente bietet Webschnittstellen. Die Kommunikation mit dem Backend-Server ist ein wichtiges Thema, das in Vue.js-Anwendungen häufig behandelt werden muss.

In diesem Artikel wird erläutert, wie die Breakpoint-Resume-Funktion aus der Perspektive der Kommunikation zwischen Vue und dem Server implementiert wird. Das Fortsetzen des Hochladens am Haltepunkt bedeutet, dass der Upload vom Haltepunkt aus ohne Neustart fortgesetzt werden kann, wenn während des Datei-Uploads eine unerwartete Unterbrechung auftritt.

Zuerst müssen wir Dateiauswahlvorgänge in Vue durchführen. Sie können die Datei-API von HTML5 verwenden, um die Dateiauswahlfunktion zu implementieren, indem Sie das Typattribut des Eingabeelements auf „Datei“ setzen. Das Codebeispiel lautet wie folgt:

<template>
  <div>
    <input type="file" @change="handleFileSelect" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleFileSelect(event) {
      // 选择文件的操作
      const file = event.target.files[0];
      // 将文件存储到Vue的data或Vuex中
      this.file = file;
    },
    uploadFile() {
      // 调用上传文件的方法
      this.upload(this.file);
    },
    upload(file) {
      // 实现上传文件的逻辑
      // ...
    }
  }
}
</script>

Während des Hochladens von Dateien müssen wir die Funktion zum Fortsetzen des Hochladens von einem Haltepunkt aus implementieren. Um die Wiederaufnahme des Haltepunkts zu implementieren, müssen wir die Grundprinzipien des Datei-Uploads verstehen. Der Prozess der Dateiübertragung besteht normalerweise darin, die Datei zur Übertragung in mehrere kleine Blöcke aufzuteilen. Die Größe jedes kleinen Blocks kann entsprechend den Netzwerkbedingungen und der Serverkonfiguration angepasst werden.

Zuerst müssen wir die Gesamtgröße der Datei und die Größe, die hochgeladen wurde, ermitteln. Wir können es mithilfe des size属性和一些XHR对象的responseText-Attributs in der Datei-API von HTML5 abrufen. Das Codebeispiel lautet wie folgt:

upload(file) {
  const chunkSize = 1024 * 1024;
  const totalSize = file.size;
  let loadedSize = 0;

  const readFile = (file, start, end) => {
    const reader = new FileReader();
    const blob = file.slice(start, end);
    reader.onload = (event) => {
      const chunk = event.target.result;

      // 将chunk发送到服务端
      // ...

      loadedSize += chunk.byteLength;

      if (loadedSize < totalSize) {
        const start = loadedSize;
        const end = Math.min(start + chunkSize, totalSize);
        readFile(file, start, end);
      }
    };

    reader.readAsArrayBuffer(blob);
  };

  readFile(file, 0, chunkSize);
}

Auf der Serverseite müssen wir kleine Teile der Datei empfangen und speichern und die empfangenen kleinen Teile aufzeichnen, um die Funktion zum Fortsetzen des Uploads zu erreichen. Eine gängige Methode ist die Verwendung einer Cache-Datenbank wie Redis, um die kleinen hochgeladenen Blöcke aufzuzeichnen. Das Codebeispiel lautet wie folgt:

app.post('/upload', (req, res) => {
  const { chunkNumber, totalChunks } = req.body;
  const file = req.files.file;

  const redisKey = `file:${file.filename}`;

  // 将小块存储到Redis中
  redisClient.hset(redisKey, chunkNumber, file.data, (err) => {
    if (err) {
      res.status(500).send('Internal Server Error');
      return;
    }

    const chunks = Array.from({ length: totalChunks }, (_, i) => i + 1);
    const pendingChunks = chunks.filter((chunk) => !redisClient.hexists(redisKey, chunk));

    if (pendingChunks.length === 0) {
      // 所有小块已上传完毕，开始合并小块
      mergeChunks(redisKey, file.filename);

      res.status(200).send('OK');
    } else {
      res.status(206).send('Partial Content');
    }
  });
});

Schließlich müssen wir uns um die Wiederaufnahme des Uploads während des Upload-Vorgangs in Vue kümmern. Wir können XHR-Objekte oder Bibliotheken von Drittanbietern wie Axios verwenden, um kleine Blöcke an den Server zu senden. Das Codebeispiel lautet wie folgt:

upload(file) {
  const chunkSize = 1024 * 1024;
  const totalSize = file.size;
  let loadedSize = 0;

  const uploadChunk = (file, start, end) => {
    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('chunkNumber', Math.ceil(start / chunkSize) + 1);
    formData.append('totalChunks', Math.ceil(totalSize / chunkSize));
    formData.append('file', chunk);

    axios.post('/upload', formData)
      .then((response) => {
        const status = response.status;
        if (status === 200) {
          // 上传完成，可以进行其他操作
          // ...
        } else if (status === 206) {
          loadedSize = end;
          const start = loadedSize;
          const end = Math.min(start + chunkSize, totalSize);
          uploadChunk(file, start, end);
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

  uploadChunk(file, 0, chunkSize);
}

Durch das obige Codebeispiel können wir das Hochladen von Dateien in Vue implementieren und die Breakpoint-Resume-Funktion unterstützen. In praktischen Anwendungen können auch einige Optimierungen vorgenommen werden, z. B. die Anzeige des Upload-Fortschritts, das Hinzufügen eines Wiederholungsmechanismus usw.

Zusammenfassend lässt sich sagen, dass es nicht kompliziert ist, die Breakpoint-Resume-Funktion über die Kommunikation zwischen Vue und dem Server zu implementieren. Wir müssen nur die Grundprinzipien des Datei-Uploads beherrschen und dann kleine Blöcke segmentieren, übertragen und aufzeichnen, um die Funktion zum Hochladen von Lebensläufen zu erreichen, was die Benutzererfahrung und die Stabilität der Dateiübertragung erheblich verbessert.

Das obige ist der detaillierte Inhalt vonAnalyse von Vue und serverseitiger Kommunikation: So implementieren Sie die Wiederaufnahme eines Haltepunkts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!