純粋なフロントエンド実装: 以前は、バックエンドがインターフェースを提供する必要なく、フロントエンドで 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 一時認証を使用します。デモにはありませんが、ぜひご自身で調べてみてください。 設定項目の情報について、バックエンドまたは運用保守に問い合わせることができます。バケット名は OSS 上に存在し、アクセス権限を持っている必要があります。そうでない場合は、常に ヘッダー: { 'コンテンツ配置': 'インライン'、 'Content-Type': this.file.type //注: 画像またはファイルのサフィックスに応じて設定されます。ファイルのタイプを取得します。具体的な理由は以下で説明します}, 'Content-Type': this.file.type` 機能: ファイルがアップロードされた後、ファイルリンクにアクセスすると直接表示できます。それ以外の場合は直接ダウンロードされます。 ファイルがアップロードされたら、resule.res.requestUrlsで確認できますが、アドレスの後の 上記のコードはデモです。主に機能の実装を目的としたコードであり、厳密なものではありません。ご自身で改良してください。 これで、フロントエンドのセグメント化されたアップロードとブレークポイントの再開を実装するための vue+element+oss に関するこの記事は終了です。vue のセグメント化されたアップロードとブレークポイントの再開に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql 5.7.5 m15 winx64.zip インストール チュートリアル
この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...
序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...
まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...
最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...
この記事では、カルーセルマップの効果を実現するためのjQueryの具体的なコードを参考までに共有しま...
ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.17-wi...
中国語チュートリアルhttps://www.ncnynl.com/category/turtlebo...
WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...
目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...
目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...
概要クラウド プラットフォームのお客様のサーバーでは、業務量が拡大し続けるとディスク容量が不足する場...
最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...
序文すでに Docker をインストールしており、Docker について簡単に理解しています。ここで...
Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます。以下の操作はすべて...
目次utf8mb4 の紹介UTF8 バイト数超過エラーutf8mb4 サポートデフォルトの文字エンコ...