純粋なフロントエンド実装: 以前は、バックエンドがインターフェースを提供する必要なく、フロントエンドで 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 インストール チュートリアル
序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...
方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...
MySQL が複数のテーブルを結合するときに、次のエラーが報告されます: [Err]1267 – 操...
最近ディープラーニングを学ぶためにUbuntu+Python 3.6バージョンを使う必要があるため、...
1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...
ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...
MySQL 5.7 をインストールするには 2 つの方法があります。1 つはインストーラをダウンロー...
個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...
目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...
JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...
目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...
突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...
この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介しま...
ドライバーモジュールに渡すパラメータ名、タイプ、権限を宣言します。 module_param(変数名...
1. Dockerをインストールするまず Linux 環境を開き、次のコマンドを入力してインストール...