Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

<テンプレート>
 <div class="ダッシュボードエディターコンテナー">
 <el-アップロード
  クラス="アップロードデモ"
  アクション=""
  ref="アップロード"
  :file-list="ファイルリスト"
  :limit="2"
  :on-change="変更処理"
  :on-remove="ハンドル削除"
  :自動アップロード="false"
  受け入れる=""
 >
  <el-button slot="trigger" size="small" type="primary">ファイルを選択</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitForm">サーバーにアップロード</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="resumeUpload">続行</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="stopUplosd">一時停止</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="abortMultipartUpload">スライスをクリア</el-button>
 </el-アップロード>
 <el-progress :percentage="パーセント" :status="アップロードステータス"></el-progress>
 </div>
</テンプレート>

<スクリプト>
 let OSS = require('ali-oss') // ali-ossプラグインをインポート const client = new OSS({
 region: 'oss-cn-shanghai', //バケットの場所に基づいて値を入力します accessKeyId: 'LTA*********RaXY', //アカウントのAccessKeyId
 accessKeySecret: 'uu1************GiS', //自分のアカウントのaccessKeySecret
 bucket: 'a******o', //バケット名});
エクスポートデフォルト{
 データ （） {
 戻る {
  ファイルリスト:[],
  ファイル: null、
  tempCheckpoint: null, // 現在のスライス コンテンツをキャッシュするために使用されます uploadId: '',
  uploadStatus: null, // 進行状況バーのアップロードステータス percentage: 0, // 進行状況バーのパーセンテージ uploadName: '', // オブジェクトが配置されているバケットのフルパス}
 },
 マウント() {
 // window.addEventListener('online', this.resumeUpload);
 },
 メソッド: {
 // クリックしてサーバーにアップロードします。submitForm(file) {
  this.multipartUpload();
 },
 // マルチパートアップロードイベントをキャンセルする async abortMultipartUpload() {
  window.removeEventListener('online', this.resumeUpload)
  const name = this.uploadName; // オブジェクトが配置されているバケットのフルパス。
  const uploadId = this.upload; // uploadId を複数の部分に分けてアップロードします。
  const 結果 = client.abortMultipartUpload(name, uploadId);
  console.log(result, '=======スライスをクリア====');
 },
 // マルチパートアップロードを一時停止します。
 停止アップロード() {
  window.removeEventListener('online', this.resumeUpload) // 一時停止時にイベントリスナーをクリアします let result = client.cancel();
  console.log(result, '----------- アップロードを一時停止 -----------')
 },
 // スライスアップロード async multipartUpload () {
  if (!this.file) {
  this.$message.error('ファイルを選択してください')
  戻る
  }
  this.uploadStatus = null
  // console.log("this.uploadStatus",this.file, this.uploadStatus);

  このパーセンテージ = 0
  試す {
  //object-name は、ファイル名 (file.txt など) またはディレクトリ (abc/test/file.txt など) としてカスタマイズでき、ファイルを現在のバケットまたはバケットの下の指定されたディレクトリにアップロードします。
  結果 = client.multipartUpload(this.file.name, this.file, { を待機します。
   ヘッダー: {
   'コンテンツ配置': 'インライン'、
   'Content-Type': this.file.type //注: 画像またはファイルのサフィックスに応じて設定します。実験では '.png' 画像を使用しました。具体的な理由は以下で説明します},
   進捗状況: (p, チェックポイント) => {
   this.tempCheckpoint = チェックポイント;
   this.upload = チェックポイント.uploadId
   this.uploadName = チェックポイント名
   this.パーセンテージ = p * 100
   // console.log(p, チェックポイント, this.percentage, '---------uploadId------------')
   // ブレークポイントの記録ポイント。ブラウザを再起動した後、直接アップロードを続行することはできません。アップロード操作を手動で開始する必要があります。
   },
   メタ: { 年: 2020, 人々: 'dev' },
   mime: このファイルタイプ
  });
  console.log(result, this.percentage, 'result= スライスのアップロードが完了しました=');
  } キャッチ (e) {
  window.addEventListener('online', this.resumeUpload) // このリスナーは、切断されたネットワークの例外処理に配置されます // タイムアウト例外をキャプチャします。
  if (e.code === 'ConnectionTimeoutError') { // リクエストタイムアウト例外処理 this.uploadStatus = 'exception'
   console.log("タイムアウトエラー");
   // ConnectionTimeoutError 操作を実行する
  }
  // コンソール.log(e)
  }
 },
 // アップロードを再開します。
 非同期再開アップロード（）{
  window.removeEventListener('online', this.resumeUpload)
  if (!this.tempCheckpoint) {
  this.$message.error('まずアップロードしてください')
  戻る
  }
  this.uploadStatus = null
  試す {
  結果 = client.multipartUpload(this.file.name, this.file, { を待機します。
   ヘッダー: {
   'コンテンツ配置': 'インライン'、
   'Content-Type': this.file.type //注: 画像またはファイルのサフィックスに応じて設定します。実験では '.png' 画像を使用しました。具体的な理由は以下で説明します},

   進捗状況: (p, チェックポイント) => {
   this.パーセンテージ = p * 100
   console.log(p, checkpoint, 'チェックポイント----アップロードされたスライス情報を復元-------')
   this.tempCheckpoint = チェックポイント;
   },
   チェックポイント: this.tempCheckpoint、
   メタ: { 年: 2020, 人々: 'dev' },
   mime: このファイルタイプ
  })
  console.log(result, 'result-=-=-再開アップロードが完了しました')
  } キャッチ (e) {
  console.log(e, 'e-=-=-');
  }
 },

 // 変更するファイルを選択する handleChange(file, fileList) {
  this.fileList = fileList.filter(行 => row.uid == file.uid)
  this.file = ファイル.raw
  // ファイルが変更されたらアップロード // this.submitForm(file)
 },
 handleRemove(ファイル、ファイルリスト) {
  this.percentage = 0 //プログレスバーをゼロに設定する this.fileList = []
 },
 }
}
</スクリプト>

<スタイルスコープ>
</スタイル>

 constクライアント = 新しいOSS({
 region: 'oss-cn-shanghai', //バケットの場所に基づいて値を入力します accessKeyId: 'LT******XY', //アカウントのAccessKeyId
 accessKeySecret: 'uu*********GiS', //自分のアカウントのaccessKeySecret
 bucket: 'a******io', //バケット名});

ヘッダー: {
   'コンテンツ配置': 'インライン'、
   'Content-Type': this.file.type //注: 画像またはファイルのサフィックスに応じて設定されます。ファイルのタイプを取得します。具体的な理由は以下で説明します},