Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

<テンプレート>
  <div id="アプリ">
    <!-- コンポーネントをアップロード -->
    <el-upload アクション ドラッグ :auto-upload="false" :show-file-list="false" :on-change="handleChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">ファイルをここにドラッグするか、<em>クリックしてアップロード</em></div>
      <div class="el-upload__tip" slot="tip">ビデオのサイズは 200M を超えません</div>
    </el-アップロード>

    <!-- 進行状況の表示-->
    <div class="progress-box">
      <span>アップロードの進行状況: {{ percent.toFixed() }}%</span>
      <el-button type="primary" size="mini" @click="handleClickBtn">{{ アップロード | btnTextFilter}}</el-button>
    </div>

    <!-- 正常にアップロードされたビデオを表示します-->
    <div v-if="ビデオURL">
      <video :src="videoUrl" コントロール />
    </div>
  </div>
</テンプレート>

非同期handleChange(ファイル) {
  定数 fileObj = file.raw
  試す{
    const バッファ = this.fileToBuffer(fileObj) を待機します
    console.log(バッファ)
  }キャッチ(e){
    コンソール.log(e)
  }
}

// File オブジェクトを ArrayBuffer に変換します 
fileToBuffer(ファイル) {
  新しい Promise を返します ((resolve, reject) => {
    const fr = 新しい FileReader()
    fr.onload = e => {
      解決(e.target.result)
    }
    fr.readAsArrayBuffer(ファイル)
    fr.onerror = () => {
      拒否(新しいエラー('ファイル形式の変換エラー'))
    }
  })
}

// ファイルを固定サイズ (2M) にスライスします。ここでは複数の定数が宣言されていることに注意してください。const chunkSize = 2097152,
  chunkList = [], // すべてのスライスを保持する配列 chunkListLength = Math.ceil(fileObj.size / chunkSize), // スライスの合計数を計算 suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // ファイルサフィックス // ファイルの内容に基づいてハッシュ値を生成する const spark = new SparkMD5.ArrayBuffer()
spark.append(バッファ)
定数ハッシュ = spark.end()

// スライスを生成します。バックエンドでは、渡されるパラメータとしてバイトデータチャンク (chunk) と各データチャンクのファイル名 (fileName) が必要です。
let curChunk = 0 // スライス時の初期位置 for (let i = 0; i < chunkListLength; i++) {
  定数項目 = {
    チャンク: fileObj.slice(curChunk, curChunk + chunkSize),
    fileName: `${hash}_${i}.${suffix}` // ファイル名はhash_1.jpgに従って命名されます}
  curChunk += チャンクサイズ
  chunkList.push(アイテム)
}
console.log(チャンクリスト)

リクエストを送信します（）{
  const requestList = [] // リクエストコレクション this.chunkList.forEach(item => {
    定数fn = () => {
      const フォームデータ = 新しいフォームデータ()
      formData.append('チャンク', item.チャンク)
      formData.append('ファイル名', item.fileName)
      戻り値: axios({
        URL: '/single3',
        メソッド: 'post'、
        ヘッダー: { 'Content-Type': 'multipart/form-data' },
        データ: フォームデータ
      }).then(res => {
        if (res.data.code === 0) { // 成功if (this.percentCount === 0) {
            this.パーセントカウント = 100 / this.チャンクリストの長さ
          }
          this.percent += this.percentCount // 進行状況を変更}
      })
    }
    リクエストリストをプッシュ(fn)
  })
  
  let i = 0 // 送信されたリクエストの数を記録する const send = async () => {
    // if ('pause') 戻り値
    if (i >= リクエストリストの長さ) {
      //完了したリターンを送信する
    } 
    リクエストリスト[i]()を待つ
    私は++
    送信（）
  }
  send() // リクエストを送信する},

axios.post('/single3', フォームデータ, {
  ヘッダー: { 'Content-Type': 'multipart/form-data' }
})

const 完全 = () => {
  アクシオス({
    URL: '/merge',
    メソッド: 'get'、
    パラメータ: { ハッシュ: this.hash }
  }).then(res => {
    if (res.data.code === 0) { // リクエストが正常に送信されました this.videoUrl = res.data.path
    }
  })
}

フィルター:
  btnTextFilter(val) {
    戻り値 ? '一時停止' : '続行'
  }
}

ハンドルクリックボタン() {
  this.upload = !this.upload
  // 一時停止されていない場合はアップロードを続行します if (this.upload) this.sendRequest()
}

<テンプレート>
  <div id="アプリ">
    <!-- コンポーネントをアップロード -->
    <el-upload アクション ドラッグ :auto-upload="false" :show-file-list="false" :on-change="handleChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">ファイルをここにドラッグするか、<em>クリックしてアップロード</em></div>
      <div class="el-upload__tip" slot="tip">ビデオのサイズは 200M を超えません</div>
    </el-アップロード>

    <!-- 進行状況の表示-->
    <div class="progress-box">
      <span>アップロードの進行状況: {{ percent.toFixed() }}%</span>
      <el-button type="primary" size="mini" @click="handleClickBtn">{{ アップロード | btnTextFilter}}</el-button>
    </div>

    <!-- 正常にアップロードされたビデオを表示します-->
    <div v-if="ビデオURL">
      <video :src="videoUrl" コントロール />
    </div>
  </div>
</テンプレート>

<スクリプト>
  「spark-md5」からSparkMD5をインポートします。
  「axios」からaxiosをインポートします
  
  エクスポートデフォルト{
    名前: 'App3'、
    フィルター:
      btnTextFilter(val) {
        戻り値 ? '一時停止' : '続行'
      }
    },
    データ（） {
      戻る {
        パーセント: 0,
        ビデオURL: ''、
        アップロード: true、
        パーセントカウント: 0
      }
    },
    メソッド: {
      非同期handleChange(ファイル) {
        if (!file) 戻り値
        パーセント = 0
        this.videoUrl = ''
        // ファイルを取得してArrayBufferオブジェクトに変換します。const fileObj = file.raw
        バッファリング
        試す {
          バッファ = this.fileToBuffer(fileObj) を待機します
        } キャッチ (e) {
          コンソール.log(e)
        }
        
        // ファイルを固定サイズ (2M) にスライスします。ここでは複数の定数が宣言されていることに注意してください。const chunkSize = 2097152,
          chunkList = [], // すべてのスライスを保持する配列 chunkListLength = Math.ceil(fileObj.size / chunkSize), // スライスの合計数を計算 suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // ファイルサフィックス // ファイルの内容に基づいてハッシュ値を生成する const spark = new SparkMD5.ArrayBuffer()
        spark.append(バッファ)
        定数ハッシュ = spark.end()

        // スライスを生成します。バックエンドでは、渡されるパラメータとしてバイトデータチャンク (chunk) と各データチャンクのファイル名 (fileName) が必要です。
        let curChunk = 0 // スライス時の初期位置 for (let i = 0; i < chunkListLength; i++) {
          定数項目 = {
            チャンク: fileObj.slice(curChunk, curChunk + chunkSize),
            fileName: `${hash}_${i}.${suffix}` // ファイル名はhash_1.jpgに従って命名されます}
          curChunk += チャンクサイズ
          chunkList.push(アイテム)
        }
        this.chunkList = chunkList // sendRequest は this.hash = hash を使用する必要があります // sendRequest は this.sendRequest() を使用する必要があります
      },
      
      // リクエストを送信する sendRequest() {
        const requestList = [] // リクエストコレクション this.chunkList.forEach((item, index) => {
          定数fn = () => {
            const フォームデータ = 新しいフォームデータ()
            formData.append('チャンク', item.チャンク)
            formData.append('ファイル名', item.fileName)
            戻り値: axios({
              URL: '/single3',
              メソッド: 'post'、
              ヘッダー: { 'Content-Type': 'multipart/form-data' },
              データ: フォームデータ
            }).then(res => {
              if (res.data.code === 0) { // Successif (this.percentCount === 0) { // アップロードが成功した後にスライスを削除し、chunkList の長さを変更して percentCount の値に影響を与えないようにしますthis.percentCount = 100 / this.chunkList.length
                }
                this.percent += this.percentCount // 進行状況を変更します this.chunkList.splice(index, 1) // アップロードが成功したら、ブレークポイントの再開を容易にするためにこのチャンクを削除します}
            })
          }
          リクエストリストをプッシュ(fn)
        })
        
        let i = 0 // 送信されたリクエストの数を記録する // すべてのファイルスライスが送信されたら、'/merge' インターフェースを要求し、ファイルハッシュをサーバーに渡す必要があります const complete = () => {
          アクシオス({
            URL: '/merge',
            メソッド: 'get'、
            パラメータ: { ハッシュ: this.hash }
          }).then(res => {
            if (res.data.code === 0) { // リクエストが正常に送信されました this.videoUrl = res.data.path
            }
          })
        }
        const send = 非同期() => {
          if (!this.upload) 戻り値
          if (i >= リクエストリストの長さ) {
            // 送信完了()
            戻る
          } 
          リクエストリスト[i]()を待つ
          私は++
          送信（）
        }
        send() // リクエストを送信する},
      
      // 一時停止ボタンを押す handleClickBtn() {
        this.upload = !this.upload
        // 一時停止されていない場合はアップロードを続行します if (this.upload) this.sendRequest()
      },
      
      // File オブジェクトを ArrayBuffer に変換します 
      fileToBuffer(ファイル) {
        新しい Promise を返します ((resolve, reject) => {
          const fr = 新しい FileReader()
          fr.onload = e => {
            解決(e.target.result)
          }
          fr.readAsArrayBuffer(ファイル)
          fr.onerror = () => {
            拒否(新しいエラー('ファイル形式の変換エラー'))
          }
        })
      }
    }
  }
</スクリプト>

<スタイルスコープ>
  .progress-box {
    ボックスのサイズ: 境界線ボックス;
    幅: 360ピクセル;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    アイテムの位置を中央揃えにします。
    上マージン: 10px;
    パディング: 8px 10px;
    背景色: #ecf5ff;
    フォントサイズ: 14px;
    境界線の半径: 4px;
  }
</スタイル>