Eine kurze Analyse, wie Vue den Datei-Slicing-Upload implementiert

Im eigentlichen Entwicklungsprojektprozess ist es manchmal erforderlich, relativ große Dateien hochzuladen, und dann ist der Upload relativ langsam. Daher kann es im Hintergrund erforderlich sein, dass das Front-End Dateisegmente hochlädt. Dies ist sehr einfach. Das heißt, schneiden Sie beispielsweise einen 1G-Dateistream in mehrere kleine Dateistreams und fordern Sie dann die Schnittstelle auf, jeweils die kleinen Dateistreams zu liefern.

Prozessbeschreibung

Um den Datei-Slice-Import zu implementieren, verwenden wir zunächst elementUI oder das native Upload-Tag, um den Datei-Stream abzurufen. Dann müssen wir wissen, ob diese Datei bereits hochgeladen wurde. Wir müssen eine eindeutige Kennung für diese Datei an das Backend übermitteln und uns dann vom Backend mitteilen lassen, ob das Problem im Backend besteht. Zu diesem Zeitpunkt kann das Backend uns drei Zustände zurückgeben:

• Die Datei ist nicht verfügbar , und alle Dateien müssen hochgeladen werden.

• Diese Datei existiert bereits und das Frontend muss sie nicht erneut hochladen.

• Ein Teil dieser Datei wurde hochgeladen und Sie müssen mit dem Hochladen der Teile fortfahren, die nicht hochgeladen wurden.

Es gibt nur diese drei Zustände. Ein wichtiger Parameter zur Implementierung dieses Schritts ist die eindeutige Kennung der Datei. Diese Kennung verwendet den MD5-Identifikationscode der Datei. Daher müssen wir zunächst den eindeutigen MD5-Identifikationscode dieser Datei erhalten. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Wir wissen, dass wir einen Slicing-Vorgang durchführen müssen, wenn eine Datei hochgeladen oder teilweise hochgeladen werden muss. Dies ist sehr einfach. Der binäre Bytestrom einer Datei ist beispielsweise insgesamt 1 GB groß und wird dann normalerweise in ein 5 GB großes Stück geschnitten Natürlich ist das letzte Stück nicht unbedingt 5 MB groß, und dann gehen wir zur Schnittstelle zum Hochladen von Dateien in Teilen und zum Initiieren von Anforderungen zum Importieren von Dateien in Teile.

Lassen Sie uns zunächst klarstellen, dass wir diese 205 fragmentierten Datenströme im Hintergrund zusammenführen müssen. Das heißt, die von unseren Fragmenten übermittelten 205 Dateiströme müssen in einer großen Datei zusammengefasst werden Auf diese Weise ist die Hintergrundzusammenführung die fertige Datei, die wir schließlich zum Import einreichen werden. Da das Backend zusammengeführt werden muss und wir es Stück für Stück hochladen, müssen wir dem Backend mitteilen, um welchen Teil der Datei es sich jeweils handelt , Rechts? Wenn wir also eine Sharding-Anfrage einreichen, müssen wir im Allgemeinen diese Parameter übergeben:

• chunk: Die aktuelle Shard-Nummer, normalerweise beginnend bei 0.
• chunkSize: Die Größe des Fragments, normalerweise 5 MB, also 5242880 Byte.
• Chunks: Wie viele Shards gibt es insgesamt?
• Datei: Der Dateistream des aktuellen Fragments.
• md5: Der eindeutige MD5-Identifikationscode der gesamten Datei, nicht fragmentiert.
• Name: Der Name der aktuellen Datei.
• size: Aktuelle Shard-Größe (wenn der letzte Block nicht unbedingt 5M groß ist).

Auf diese Weise weiß das Backend, wie die endgültigen Dateien zusammengeführt werden. Natürlich müssen bestimmte Felder vom Backend definiert werden, und dann können wir entsprechend dieser Idee eine entsprechende Verbindung herstellen.

OK, nachdem alle unsere 205 Shard-Daten übermittelt wurden, müssen wir eine andere Schnittstelle durchlaufen, um das Backend zu benachrichtigen. Okay, meine Front-End-Shards wurden übertragen und Sie können die Dateien zusammenführen.

Dann ist die Backend-Zusammenführung abgeschlossen und die Datei wurde erfolgreich importiert!

Erhalten Sie den eindeutigen MD5-Identifikationscode der Datei. Viele Leute sagen, dass MD5 keine Verschlüsselung ist. Tatsächlich kann MD5 keine Dateien verschlüsseln und nur einen eindeutigen Code generieren Stellen Sie sich das einfach als Verschlüsselung vor, aber denken Sie nicht, dass die Übermittlung einer MD5-Kodierung die Übermittlung einer verschlüsselten Datei an das Backend bedeutet. Erstens ist dies eine Zeichenfolge, keine verschlüsselte Datei. Zweitens kann dies nicht der Fall sein entschlüsselt. Wir generieren hier lediglich eine eindeutige Kennung für die Datei, damit das Backend feststellen kann, ob die Datei schon einmal auf dem Server vorhanden war. Wenn es eine eindeutige Kennung gibt, bedeutet dies, dass sie bereits zuvor hochgeladen wurde Wenn Sie die Datei erneut hochladen, ändert sich schließlich der MD5-Identifikationscode.

Wie man die MD5-Kodierung einer Datei erhält, ist sehr einfach. Sie müssen eine Bibliothek

spark-md5

in Vue verwenden.

Ein Befehl zum Installieren von

npm install --save spark-md5

Dann können wir eine Methode schreiben, um es zu kapseln.

Erstellen Sie eine fileMd5Sum.js-Datei:

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

Dann können Sie sie bei Bedarf verwenden. Natürlich wird hier ein Versprechen zurückgegeben, das direkt .then abgerufen werden kann.

Oder verwenden Sie async, waiting.

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入门教程、编程基础视频）

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie Vue den Datei-Slicing-Upload implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!