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

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

純粋なフロントエンド実装:切片上傳斷點續傳斷點續傳カットとアップロードに基づいて実装する必要があります

以前は、バックエンドがインターフェースを提供する必要なく、フロントエンドで OSS をアップロードしていました。まず、完全なコードを投稿し、それを直接コピーし、新しい OSS のパラメータを自社の OSS の関連情報に変更します。問題が発生した場合は、以下を読み続けてください。

oss官方文檔

https://help.aliyun.com/document_detail/111268.html?spm=a2c4g.11186623.6.1111.5a583a07LknRUO

このコードは必要な環境を許可します: vue + element + ali-oss

ali-oss をインストールします: cnpm install ali-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', //バケット名});

上記の情報をフロントエンドに配置すると、セキュリティ上の問題が発生する可能性があります。プロジェクトで使用する場合は、可能な限りバックエンドインターフェースで提供する必要があります。または、STS 一時認証を使用します。デモにはありませんが、ぜひご自身で調べてみてください。
https://www.alibabacloud.com/help/zh/doc-detail/100624.htm?spm=a2c63.p38356.879954.5.7a234d04IQpf5I#concept-xzh-nzk-2gb

設定項目の情報について、バックエンドまたは運用保守に問い合わせることができます。バケット名は OSS 上に存在し、アクセス権限を持っている必要があります。そうでない場合は、常にPleasr create a busket firstまたは「クロスドメイン」と報告されます。

etagでクロスドメインまたはエラー メッセージが発生した場合は、OSS 構成を確認し、OSS サーバー権限を持つユーザーを見つけて構成してください。

window.addEventListener('online', this.resumeUpload)は、ネットワークの状態 (切断と接続) を監視するために使用されます。切断後にネットワークを再開して自動アップロードを実現するには、リスナーを設定する必要があります。

window.removeEventListener('online', this.resumeUpload)リスナーをキャンセルします。監視解除を設定しない場合は、常に監視条件が満たされているため、インターネットに接続しているときはアップロードが継続されます。

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

'Content-Type': this.file.type` 機能: ファイルがアップロードされた後、ファイルリンクにアクセスすると直接表示できます。それ以外の場合は直接ダウンロードされます。

ファイルがアップロードされたら、resule.res.requestUrlsで確認できますが、アドレスの後の?uploadId=******をクリックするように注意してください。

上記のコードはデモです。主に機能の実装を目的としたコードであり、厳密なものではありません。ご自身で改良してください。

これで、フロントエンドのセグメント化されたアップロードとブレークポイントの再開を実装するための vue+element+oss に関するこの記事は終了です。vue のセグメント化されたアップロードとブレークポイントの再開に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ファイルアップロード機能を実現するVue Element UI + OSS
  • Vue.js を使用して Alibaba Cloud OSS ストレージに画像をアップロードする方法の例
  • VueでOSSに画像をアップロードする方法の例(画像には削除機能があります)
  • VueページでAli OSSアップロード機能を使用する例(パート2)
  • VueページでAli OSSアップロード機能を使用する例(I)
  • VueはOSSを使用して画像や添付ファイルをアップロードします

<<:  mysql 5.7.5 m15 winx64.zip インストール チュートリアル

>>:  Nginxのアクセスボリューム制御の詳細な説明

推薦する

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...

mysqlはルートユーザーと一般ユーザーを作成し、機能を変更および削除します。

方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...

さまざまな MySQL テーブルソートルールのエラーの分析

MySQL が複数のテーブルを結合するときに、次のエラーが報告されます: [Err]1267 – 操...

vitrualBox+ubuntu16.04 python3.6 最新チュートリアルと詳細な手順のインストール

最近ディープラーニングを学ぶためにUbuntu+Python 3.6バージョンを使う必要があるため、...

理論の普及——ユーザーエクスペリエンス

1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...

MySQL 5.7 インストール MySQL サービスを開始できませんが、サービスはエラーを報告しません

MySQL 5.7 をインストールするには 2 つの方法があります。1 つはインストーラをダウンロー...

Linux アカウントのパスワードを変更する詳細な例

個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...

JavaScript の 50 以上のユーティリティ関数の概要

JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...

JSブラウザイベントモデルの詳細な説明

目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...

Dockerはnextcloudを使用してプライベートBaiduクラウドディスクを構築します

突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...

JavaScript でシンプルなタイマーを実装する

この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介しま...

Linux におけるドライバモジュールのパラメータ転送プロセスの分析

ドライバーモジュールに渡すパラメータ名、タイプ、権限を宣言します。 module_param(変数名...

SpringBoot プロジェクトの Docker クイック デプロイメントの紹介

1. Dockerをインストールするまず Linux 環境を開き、次のコマンドを入力してインストール...