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のアクセスボリューム制御の詳細な説明

推薦する

Windows での MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有

まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...

HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...

jQueryをベースにカルーセル効果を実現する

この記事では、カルーセルマップの効果を実現するためのjQueryの具体的なコードを参考までに共有しま...

Windows 環境での MySQL 8.0 のインストール、設定、アンインストール

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.17-wi...

ROS で Turtlebot3 移動ロボットを制御するための基本的なチュートリアル

中国語チュートリアルhttps://www.ncnynl.com/category/turtlebo...

WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要

WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...

MySQL インデックスの詳細な説明

目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...

Docker のインストールと構成イメージの高速化の実装

目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...

Linuxロスレス展開方法

概要クラウド プラットフォームのお客様のサーバーでは、業務量が拡大し続けるとディスク容量が不足する場...

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...

DockerでMySQLコンテナを作成する簡単な手順

序文すでに Docker をインストールしており、Docker について簡単に理解しています。ここで...

Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます

Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます。以下の操作はすべて...

MySQL/MariaDB で完全な Unicode をサポートする方法

目次utf8mb4 の紹介UTF8 バイト数超過エラーutf8mb4 サポートデフォルトの文字エンコ...