実際の開発プロジェクトのプロセスでは、比較的大きなファイルをアップロードする必要がある場合があり、その場合、アップロードが比較的遅くなり、バックグラウンドでフロントエンドの処理が必要になる場合があります。スライス アップロードは非常に簡単で、たとえば 1 G のファイル ストリームをいくつかの小さなファイル ストリームに分割し、これらの小さなファイル ストリームをそれぞれ配信するようにインターフェイスに要求します。

プロセスの概要

ファイル スライスのインポートを?qū)g裝するには、まず elementUI またはネイティブ アップロード タグを使用してファイル ファイル ストリームを取得し、次に行う必要があることが 1 つあります。このファイルが以前にアップロードされたかどうかを知るためです。このファイルの一意の識別子をバックエンドに送信して、バックエンドに問題が存在するかどうかをバックエンドに知らせる必要があります。この時點(diǎn)で、バックエンドは 3 つの値を返す可能性がありますステータス :

• ファイルがありません。すべてアップロードする必要があります。

• このファイルは存在するため、フロントエンドはそれを再度アップロードする必要はありません。

• このファイルの一部はアップロードされました。アップロードされていない部分は引き続きアップロードする必要があります。

狀態(tài)はこれら 3 つだけです。このステップを?qū)g裝するための重要なパラメータは、ファイルの一意の識別子です。この識別子には、ファイルの MD5 識別コードが使用されます。したがって、最初にこのファイルの MD5 固有の識別コードを取得する必要があります。 [関連する推奨事項(xiàng): vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

ファイルをアップロードする必要がある場合、または部分的にアップロードする必要がある場合は、スライス操作を?qū)g行する必要があります。これは非常に単純で、例えばファイルのバイナリバイトストリームは合計1Gですが、通常は5Mごとに1つに分割されるため、1Gのファイルであれば205個に分割する必要があります。もちろん、最後の部分は必ずしも 5M である必要はなく、ファイルを部分的にアップロードし、ファイルを部分にインポートするリクエストを開始するためのインターフェイスに進(jìn)みます。

まず最初に、これらの 205 個の斷片化されたデータ ストリームを送信した後、背景をマージする必要があることを明確にしましょう。つまり、フラグメントによって送信された 205 個のファイル ストリームは、大きなファイルに合成されて保存されます。 . このようにして、バックグラウンドでマージされたファイルは、最終的にインポートのために送信するファイルになります。バックエンドはマージする必要があるため、それらを部分的にアップロードします。各部分がファイルのどの部分であるかをバックエンドに知らせる必要がありますは正しい？したがって、シャーディング リクエストを送信するときは、通常、次のパラメータを渡す必要があります:

• chunk: 現(xiàn)在のシャード番號 (通常は 0 から始まります)。
• chunkSize: フラグメントのサイズ。通常は 5M、つまり 5242880 バイトです。
• chunks: シャードの合計數(shù)。
• file: 現(xiàn)在のフラグメントのファイル ストリーム。
• md5: 斷片化されていないファイル全體の MD5 固有の識別コード。
• name: 現(xiàn)在のファイルの名前。
• size: 現(xiàn)在のフラグメント サイズ (最後のブロックが必ずしも 5M ではない場合)。

これにより、バックエンドは最終ファイルをマージする方法を認(rèn)識します。もちろん、特定のフィールドはバックエンドによって定義される必要があり、その後、この考え方に従って接続できます。

OK、205 個のシャード データがすべて送信された後、バックエンドに通知するために別のインターフェイスを経由する必要があります。フロントエンド シャードが送信されたので、ファイルをマージできます。

これでバックエンドのマージが完了し、ファイルが正常にインポートされました。

ファイルの MD5 固有の識別コードを取得する

MD5 は暗號化ではないと多くの人が言いますが、実際、この考えはここではあまり正しくありません。MD5 は暗號化できませんファイルです。はい、一意のコードのみが生成されます。したがって、暗號化と考えてください。ただし、MD5 コードの送信が、暗號化されたファイルをバックエンドに送信するのと同じであるとは考えないでください。まず、これは次のとおりです。暗號化されたファイルではなく文字列であるため、第二に、これは復(fù)號化できません。ここではファイルの一意の識別子を生成するだけで、ファイルが以前にサーバー上に存在したかどうかをバックエンドが判斷できるようになります。一意の識別子がある場合は、以前にアップロードされたことを意味します。以前のものを使用せずにそのまま使用できます。結(jié)局のところ、ファイルが変更されると、MD5 識別コードが変更されます。

ファイルの MD5 エンコーディングを取得する方法は非常に簡単で、vue でライブラリ spark-md5 を使用する必要があります。

インストールするコマンドは 1 つです

npm install --save spark-md5

その後、それをカプセル化するメソッドを作成できます。

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

その後、必要なときにそれを使用できます。もちろん、ここで返されるのは Promise です。単に .then# です。 ＃＃ わかった。

async、await を使用します。

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

文件切片

獲取了文件MD5標(biāo)識碼，后臺說需要提交，我們就需要把文件切片，從頭提交或者是提交部分操作了，如果不需要的話直接走合并接口就可以了，走合并接口其實(shí)是告訴后臺合并，我們要做的就是把其他除了文件相關(guān)的其他參數(shù)傳遞給后臺罷了。

文件切片就是類似于字符串截取，這里是截取字節(jié)。獲取需要的參數(shù)我們自己些就可以了。假設(shè)我們使用 elementUI 文件上傳組件獲取到了文件 file。

獲取文件名 name

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

分片文件大小 chunkSize

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

文件切片 chunkList 列表

            let chunkList = []  // 創(chuàng)建一個數(shù)組用來存儲每一片文件流數(shù)據(jù)
            if (file.size < chunkSize) {  // 如果文件大小小于5M就只有一片，不用切都
              chunkList.push(file.raw.slice(0))  // 文件流從第一個字節(jié)直接截取到最后就可以了
            } else {  // 如果文件大小大于5M 就需要切片了
              var start = 0, end = 0  // 創(chuàng)建兩個變量 開始位置 結(jié)束位置
              while (true) {  // 循環(huán)
                end += chunkSize  // 結(jié)束為止 = 結(jié)束位置 + 每片大小
                let blob = file.raw.slice(start, end)  // 文件流從開始位置截取到結(jié)束位置
                start += chunkSize  // 截取完，開始位置后移
                if (!blob.size) {  // 如果截取不到了就退出
                  break;
                }
                chunkList.push(blob)  // 把截取的每一片數(shù)據(jù)保存到數(shù)組
              }
            }

切片總數(shù) chunks

我們上一步已經(jīng)獲取到每片文件流的數(shù)組了，所以說呢，直接獲取就可以了。

let chunks = chunkList.length

切片大小 size

我們是按照 5 M 切割的，所以說每片大小應(yīng)該是 5 * 1024 * 1024 但是呢，不對，因?yàn)樽詈笠黄灰欢ň褪钦玫?5 M，所以說我們可直接 .size 獲取一下大小。比如：

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

參數(shù)都找齊了，然后就走切片提交接口開始提交數(shù)據(jù)就可以了。

合并

當(dāng)我們把分片數(shù)據(jù)全部提交成功，后臺返回說切片文件保存成功之后，我們就可以走最后一個接口，提交就可以了。

好了，就這樣！完成?。?！

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

以上がvue がファイル スライス アップロードを?qū)g裝する方法の簡単な分析の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。