vue がファイル スライス アップロードを実装する方法の簡単な分析

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

プロセスの概要

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

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

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

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

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

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

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

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

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

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

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

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

MD5 は暗号化ではないと多くの人が言いますが、実際、この考えはここではあまり正しくありません。MD5 は暗号化できませんファイルです。はい、一意のコードのみが生成されます。したがって、暗号化と考えてください。ただし、MD5 コードの送信が、暗号化されたファイルをバックエンドに送信するのと同じであるとは考えないでください。まず、これは次のとおりです。暗号化されたファイルではなく文字列であるため、第二に、これは復号化できません。ここではファイルの一意の識別子を生成するだけで、ファイルが以前にサーバー上に存在したかどうかをバックエンドが判断できるようになります。一意の識別子がある場合は、以前にアップロードされたことを意味します。以前のものを使用せずにそのまま使用できます。結局のところ、ファイルが変更されると、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标识码，后台说需要提交，我们就需要把文件切片，从头提交或者是提交部分操作了，如果不需要的话直接走合并接口就可以了，走合并接口其实是告诉后台合并，我们要做的就是把其他除了文件相关的其他参数传递给后台罢了。

文件切片就是类似于字符串截取，这里是截取字节。获取需要的参数我们自己些就可以了。假设我们使用 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入门教程、编程基础视频）

以上がvue がファイル スライス アップロードを実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。