1. 基本的な使い方最近、el-uploadコンポーネントを勉強して、小さな落とし穴に陥りました。みんなが学べるように書き留めました 要素のコンポーネントを直接コピーして使用することは非常に一般的ですが、アップロード コンポーネントを使用する場合、落とし穴に遭遇します。 直接アップロードを使用すると、必ずこのエラーが発生します。 また、アップロードした写真が突然消えてしまうこともあります。このとき、インターフェースがなければ、なぜ削除されたのかわかりません。そのため、インターフェースがない場合は、クロスドメインエラーが原因で写真が消えたのではないかと推測することしかできません。 最後に、会社のアドレスを取得してインターフェイスを調整しました。答えは正解でした:action="https://jsonplaceholder.typicode.com/posts/"。これは要素のアクションパラメータです。htmlを使用するとajaxが呼び出され、同一生成元ポリシーが異なり、エラーが発生します。 通常、会社は画像を URL 形式に変換するためのアドレス リンクを提供します。それを呼び出して保存するだけです。ただし、トークンのアクセス許可が必要になる場合があります。このとき、めったに行われないことがあります。通常、トークンはコンポーネントを介して直接運ばれないため、トークンは el-upload コンポーネントを介して運ばれる必要があります。 <el-アップロード action="https://xxxx アドレス" :headers="ヘッダーをインポート" > </el-アップロード> '@/utils/token' から {getToken} をインポートします。 データ() { 戻る { インポートヘッダー: {トークン: getToken()}, }; }, 2. 画像量の制御<el-アップロード アクション="https://security.brofirst.cn/api/common/upload" :headers="ヘッダーをインポート" :limit="制限" :on-exceed="masterFileMax" > <i class="el-icon-plus"></i> </el-アップロード> // 最大何枚の写真をアップロードできるか masterFileMax(files, fileList) { console.log(ファイル、ファイルリスト); this.$message.warning(`最大 ${this.limit} 個のファイルをアップロードしてください。`); }, 3. 画像形式の制限/複数の画像を選択可能<el-アップロード accept=".JPG、.PNG、.JPEG、.jpg、.png、.jpeg" 複数 > <i class="el-icon-plus"></i> </el-アップロード> 例 <el-アップロード アクション="https://xxxx" :headers="ヘッダーをインポート" リストタイプ="絵カード" :on-preview="ハンドルPictureCardPreview" :on-remove="ハンドル削除" :on-success="アバターハンドル成功" :limit="制限" :on-exceed="masterFileMax" accept=".JPG、.PNG、.JPEG、.jpg、.png、.jpeg" 複数 > <i class="el-icon-plus"></i> </el-アップロード> <スクリプト> '@/utils/token' から {getToken} をインポートします。 エクスポートデフォルト{ 名前:'フィードバック', データ() { 戻る { インポートヘッダー: {トークン: getToken()}, 画像:[], 制限:9 }; }, メソッド: { //画像を削除する handleRemove(file, fileList) { const idx = this.images.findIndex(it=>it===file.response.data.fullurl) this.images.splice(idx,1) }, handlePictureCardPreview(ファイル) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, //アップロード成功後のデータ handleAvatarSuccess(response, file, fileList){ console.log(レスポンス、ファイル、ファイルリスト); if(レスポンスコード===1){ this.images.push(レスポンスデータ.fullurl) } }, // 最大何枚の写真をアップロードできるか masterFileMax(files, fileList) { console.log(ファイル、ファイルリスト); this.$message.warning(`最大 ${this.limit} 個のファイルをアップロードしてください。`); } } }; </スクリプト> 補足: vueプロジェクトでelement-uiのUploadコンポーネントを使用する<el-アップロード v-else クラス='ensureensureButt' :action="インポートファイルURL" :data="アップロードデータ" name="インポートファイル" :onError="アップロードエラー" :onSuccess="アップロード成功" :beforeUpload="アバターアップロード前" > <el-button size="small" type="primary">OK</el-button> このうち、importFileUrlはバックグラウンドインターフェース、upLoadDataはファイルをアップロードする際にアップロードする追加パラメータ、uploadErrorはファイルのアップロードが失敗したときのコールバック関数、uploadSuccessはファイルのアップロードが成功したときのコールバック関数、beforeAvatarUploadはファイルをアップロードする前に呼び出される関数です。ここでファイルの種類を判断できます。 データ () { インポートファイル URL: 'http:dtc.com/cpy/add', アップロードデータ: { cpyId: '123456', 発生時刻: '2017-08' } }, メソッド: { // アップロード成功後のコールバックuploadSuccess (response, file, fileList) { console.log('ファイルをアップロード', 応答) }, // アップロードエラー uploadError (response, file, fileList) { console.log('アップロードに失敗しました。もう一度お試しください!') }, // アップロード前にファイルサイズを決定する beforeAvatarUpload (file) { const extension = file.name.split('.')[1] === 'xls' const extension2 = file.name.split('.')[1] === 'xlsx' const extension3 = file.name.split('.')[1] === 'doc' const extension4 = file.name.split('.')[1] === 'docx' 定数isLt2M = ファイルサイズ / 1024 / 1024 < 10 if (!拡張子 && !拡張子2 && !拡張子3 && !拡張子4) { console.log('アップロードできるテンプレートは xls、xlsx、doc、docx 形式のみです!') } もし (!isLt2M) { console.log('アップロードされたテンプレートのサイズは10MBを超えることはできません!') } 拡張子を返す || extension2 || extension3 || extension4 && isLt2M } } これで、Vue での Element el-upload コンポーネントの使用に関するこの記事は終了です。Vue Element el-upload コンポーネントに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: nginx 設定ファイルパスとリソースファイルパスを表示する方法
>>: MySQL マスタースレーブレプリケーションの原理と注意点
この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...
目次序文1. オブジェクト.freeze() 2. オブジェクト.seal() 3. オブジェクト....
フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...
フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...
序文今日はちょっとしたデモを書きました。左右にスワイプするロジックに関わる部分があります。当初はプラ...
序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...
これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...
同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...
この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...
今日、mysql ポートを変更したいと思ったのですが、/etc/ ディレクトリに my.cnf ファ...
前提条件Windows Server でコンテナーを実行するには、Windows Server (半...
Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...
この記事では、大画面ページのスクリーンアダプテーションを実現するためのVueの具体的なコードを参考ま...
目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...