Analyse de Vue et de la communication côté serveur : comment implémenter la reprise du point d'arrêt

Anatomie de la communication entre Vue et le serveur : Comment implémenter la reprise du point d'arrêt

Dans le développement front-end, Vue.js est un framework JavaScript très populaire, qui fournit une méthode légère et facile à utiliser pour créer des interactions interactives. interfaces Web. La communication avec le serveur backend est un problème important qui doit souvent être traité dans les applications Vue.js.

Cet article expliquera comment implémenter la fonction de reprise du point d'arrêt du point de vue de la communication entre Vue et le serveur. Le téléchargement de reprise du point d'arrêt signifie que lorsqu'une interruption inattendue se produit pendant le téléchargement de fichiers, le téléchargement peut être repris à partir du point d'arrêt sans redémarrer.

Tout d'abord, nous devons effectuer des opérations de sélection de fichiers dans Vue. Vous pouvez utiliser l'API File de HTML5 pour implémenter la fonction de sélection de fichier en définissant l'attribut type de l'élément d'entrée sur "file". L'exemple de code est le suivant :

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

Pendant le processus de téléchargement de fichiers, nous devons implémenter la fonction de reprise du téléchargement à partir d'un point d'arrêt. Afin de mettre en œuvre la reprise du point d'arrêt, nous devons comprendre les principes de base du téléchargement de fichiers. Le processus de transfert de fichiers consiste généralement à diviser le fichier en plusieurs petits blocs pour la transmission. La taille de chaque petit bloc peut être ajustée en fonction des conditions du réseau et de la configuration du serveur.

Tout d'abord, nous devons obtenir la taille totale du fichier et la taille qui a été téléchargée. Nous pouvons utiliser l'attribut size属性和一些XHR对象的responseText dans l'API File de HTML5 pour l'obtenir. L'exemple de code est le suivant :

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

Côté serveur, nous devons recevoir et enregistrer de petits morceaux du fichier, et enregistrer les petits morceaux reçus pour réaliser la fonction de reprise du téléchargement à un point d'arrêt. Une méthode courante consiste à utiliser une base de données de cache telle que Redis pour enregistrer les petits morceaux qui ont été téléchargés. L'exemple de code est le suivant :

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

Enfin, nous devons gérer la reprise du téléchargement pendant le processus de téléchargement dans Vue. Nous pouvons utiliser des objets XHR ou des bibliothèques tierces telles que Axios pour envoyer de petits morceaux au serveur. L'exemple de code est le suivant :

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

Grâce à l'exemple de code ci-dessus, nous pouvons implémenter le téléchargement de fichiers dans Vue et prendre en charge la fonction de reprise du point d'arrêt. Dans les applications pratiques, certaines optimisations peuvent également être apportées, comme l'affichage de la progression du téléchargement, l'ajout d'un mécanisme de nouvelle tentative, etc.

Pour résumer, il n'est pas compliqué d'implémenter la fonction de reprise du point d'arrêt via la communication entre Vue et le serveur. Il nous suffit de maîtriser les principes de base du téléchargement de fichiers, puis de segmenter, transmettre et enregistrer de petits blocs pour obtenir la fonction de téléchargement de reprise, ce qui améliore considérablement l'expérience utilisateur et la stabilité du transfert de fichiers.

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!