Une brève analyse de la façon dont vue implémente le téléchargement par découpage de fichiers

Dans le processus de développement actuel du projet, il est parfois nécessaire de télécharger des fichiers relativement volumineux, puis le téléchargement sera relativement lent, donc l'arrière-plan peut nécessiter le front-end pour télécharger des tranches de fichiers, c'est très simple, c'est-à-dire couper, par exemple, un flux de fichiers 1G en plusieurs petits flux de fichiers, puis demander à l'interface de fournir respectivement les petits flux de fichiers.

Bref du processus

Pour implémenter l'importation de tranches de fichiers, nous utilisons d'abord elementUI ou la balise de téléchargement native pour obtenir le flux de fichiers. Ensuite, une chose que nous devons faire est de savoir si ce fichier a déjà été téléchargé. nous devons soumettre un identifiant unique pour ce fichier au backend, puis laisser le backend nous dire si le problème existe dans le backend. À ce moment, le backend peut nous renvoyer trois états :

• Le fichier n'est pas disponible. , et tous les fichiers doivent être téléchargés.

• Ce fichier existe déjà et le front-end n'a pas besoin de le télécharger à nouveau.

• Une partie de ce fichier a été téléchargée et vous devez continuer à télécharger les parties qui n'ont pas été téléchargées.

Il n'y a que ces trois états. Un paramètre important pour mettre en œuvre cette étape est l'identifiant unique du fichier. Cet identifiant utilise le code d'identification MD5 du fichier. Nous devons donc d’abord obtenir le code d’identification unique MD5 de ce fichier. [Recommandations associées : Tutoriel vidéo vuejs, Développement web front-end]

Nous savons que lorsqu'un fichier doit être téléchargé ou doit être partiellement téléchargé, nous devons effectuer une opération de découpage. C'est très simple. Par exemple, le flux d'octets binaires d'un fichier fait 1 Go au total, puis il est généralement coupé en un seul morceau de 5 Mo, donc s'il s'agit d'un fichier de 1 Go, il doit être coupé en 205 morceaux. bien sûr, le dernier morceau ne fait pas forcément 5M, et puis on passe à l'interface de téléchargement de fichiers en parties, initiant des requêtes d'importation de fichiers en parties.

Tout d'abord, précisons qu'après avoir soumis ces 205 flux de données fragmentés, nous devons les fusionner en arrière-plan, c'est-à-dire combiner les 205 flux de fichiers soumis par nos fragments dans un fichier volumineux et l'enregistrer. de cette façon, la fusion en arrière-plan. Le fichier terminé est le fichier que nous soumettrons éventuellement pour importation. Puisque le backend doit être fusionné et que nous le téléchargeons morceau par morceau, nous devons indiquer au backend à quelle partie du fichier correspond chaque morceau. , droite? Ainsi, lorsque nous soumettons une demande de fragmentation, nous devons généralement transmettre ces paramètres :

• chunk : Le numéro de fragment actuel, commençant généralement à 0.
• chunkSize : La taille du fragment, généralement 5 M, soit 5 242 880 octets.
• chunks : combien de fragments y a-t-il au total.
• file : Le flux de fichiers du fragment actuel.
• md5 : Le code d'identification unique MD5 de l'ensemble du fichier, non fragmenté.
• name : Le nom du fichier actuel.
• size : Taille actuelle du fragment (si le dernier bloc ne fait pas nécessairement 5M).

De cette façon, le backend sait comment fusionner les fichiers finaux. Bien sûr, des champs spécifiques doivent être définis par le backend, et nous pouvons ensuite nous connecter en conséquence selon cette idée.

OK, une fois que toutes nos 205 données de fragments ont été soumises, nous devons passer par une autre interface, qui consiste à informer le backend. D'accord, mes fragments front-end ont été transmis et vous pouvez fusionner les fichiers.

Ensuite, la fusion backend est terminée et le fichier est importé avec succès !

Obtenez le code d'identification unique MD5 du fichier

Beaucoup de gens disent que MD5 n'est pas un cryptage. En fait, cette idée n'est pas correcte ici. MD5 ne peut pas crypter les fichiers et générera uniquement un code unique. Eh bien, oh, pensez-y simplement comme un cryptage, mais ne pensez pas que soumettre un encodage MD5 signifie soumettre un fichier crypté au backend. Tout d'abord, il s'agit d'une chaîne, pas d'un fichier crypté. Deuxièmement, cette chose ne peut pas l'être. décrypté. Nous générons simplement ici un identifiant unique pour le fichier, afin que le backend puisse déterminer si le fichier a déjà existé sur le serveur. S'il existe un identifiant unique, cela signifie qu'il a déjà été téléchargé. Vous pouvez simplement utiliser le précédent sans. en le téléchargeant à nouveau, après tout, si le fichier est modifié, le code d'identification MD5 changera.

Comment obtenir l'encodage MD5 d'un fichier est très simple Vous devez utiliser une bibliothèque spark-md5 dans vue.

Une commande pour installer

npm install --save spark-md5

Ensuite, nous pouvons écrire une méthode pour l'encapsuler.

Créez un fichier fileMd5Sum.js :

import SparkMD5 from 'spark-md5'

export default {
  // md5值计算
  fileMd5Sum(file) {
    return new Promise(resolve => {
      let fileReader = new FileReader()
      let Spark = new SparkMD5.ArrayBuffer()
      fileReader.readAsArrayBuffer(file)
      fileReader.onload = function (e) {
        Spark.append(e.target.result)
        let md5 = Spark.end()
        resolve(md5)
      }
    });
  }
}

Ensuite, vous pouvez l'utiliser lorsque vous en avez besoin. Bien sûr, ce qui est renvoyé ici est une promesse, qui peut être obtenue directement .then. .then 就可以获取了。

或者是使用 async、 await

Ou utilisez async, wait. 🎜

let md5Str = await this.fileMd5Sum.fileMd5Sum(file.raw)

文件切片

获取了文件MD5标识码，后台说需要提交，我们就需要把文件切片，从头提交或者是提交部分操作了，如果不需要的话直接走合并接口就可以了，走合并接口其实是告诉后台合并，我们要做的就是把其他除了文件相关的其他参数传递给后台罢了。

文件切片就是类似于字符串截取，这里是截取字节。获取需要的参数我们自己些就可以了。假设我们使用 elementUI 文件上传组件获取到了文件 file。

获取文件名 name

let fileName = file.name  // 获取文件名

分片文件大小 chunkSize

let chunkSize = 5 * 1024 * 1024   // 一般是 5M，具体多少看后端想要多少

文件切片 chunkList 列表

            let chunkList = []  // 创建一个数组用来存储每一片文件流数据
            if (file.size < chunkSize) {  // 如果文件大小小于5M就只有一片，不用切都
              chunkList.push(file.raw.slice(0))  // 文件流从第一个字节直接截取到最后就可以了
            } else {  // 如果文件大小大于5M 就需要切片了
              var start = 0, end = 0  // 创建两个变量 开始位置 结束位置
              while (true) {  // 循环
                end += chunkSize  // 结束为止 = 结束位置 + 每片大小
                let blob = file.raw.slice(start, end)  // 文件流从开始位置截取到结束位置
                start += chunkSize  // 截取完，开始位置后移
                if (!blob.size) {  // 如果截取不到了就退出
                  break;
                }
                chunkList.push(blob)  // 把截取的每一片数据保存到数组
              }
            }

切片总数 chunks

我们上一步已经获取到每片文件流的数组了，所以说呢，直接获取就可以了。

let chunks = chunkList.length

切片大小 size

我们是按照 5 M 切割的，所以说每片大小应该是 5 * 1024 * 1024 但是呢，不对，因为最后一片不一定就是正好的 5 M，所以说我们可直接 .size 获取一下大小。比如：

chunkList[0].size  // 获取第1片大小

参数都找齐了，然后就走切片提交接口开始提交数据就可以了。

合并

当我们把分片数据全部提交成功，后台返回说切片文件保存成功之后，我们就可以走最后一个接口，提交就可以了。

好了，就这样！完成！！！

（学习视频分享：vuejs入门教程、编程基础视频）

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!