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 マスタースレーブレプリケーションの原理と注意点
VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...
VC6.0は確かに古すぎるVC6.0は昔の開発ツールです。現在のwin10では対応していません。しか...
登録するフロントエンドは、vue の axios を使用して値を渡し、取得したアカウントとパスワード...
目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...
1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...
目次効果ドキュメント最初のステップステップ2ステップ3ソースコード効果ドキュメント最初のステップta...
Vue のフロントエンドとバックエンドのポートが一致していませんconfig index.jsファイ...
以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...
この記事では、MySQL 5.7.18のグリーンバージョンをダウンロードしてインストールする詳細な手...
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...
プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...
1. 補助AIDE (Advanced Instruction Detection Environm...
1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...
具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...