最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bootstrap フレームワークを使用していましたが、js については漠然とした理解しかありませんでした。vue.js も使用していましたが、徹底的に学習していなかったため、さまざまな落とし穴に陥りました。 element-ui の使用時に発生した問題とその解決策を分析します。不備があればご指摘ください。 まず、element-ui 公式サイトにアップロード コンポーネントの簡単な紹介があります。 <el-アップロード クラス="アップロードデモ" アクション="https://jsonplaceholder.typicode.com/posts/" :on-preview="ハンドルプレビュー" :on-remove="ハンドル削除" :file-list="ファイルリスト"> <el-button size="small" type="primary">クリックしてアップロード</el-button> <div slot="tip" class="el-upload__tip">アップロードできるのは jpg/png ファイルのみで、サイズは 500kb を超えてはなりません</div> </el-アップロード> 実際、アップロードはinput type="file"を複数のスタイルのレイヤーでカプセル化することです 1. アクション URLまず理解できないのは、アクション内の URL です。バックグラウンドで PHP を使用しています。後で理解したところによると、この URL は実際にはフォーム内のアクションと同様に、PHP が使用するアップロード関数です。違いは、長い間探していたのですが、デフォルトの投稿配信方法を変更できるかどうかがわからないことです。 2番目のファイルを受け取る際に他のパラメータを渡す解決策1: URLパラメータの受け渡しPHP が提供する URL にパラメータを渡す最も直接的な方法は、アクションで post メソッドを使用することですが、PHP バックエンドで使用する RESTful URL では post メソッドを介してパラメータを渡すことができません。いくつかの方法を試しましたが失敗し、get メソッドに変更する方法がわかりません。 最初の選択肢は放棄するしかない 解決策2: アクションを使わないアクションをあきらめます。多くの情報を検索した後、アクションの代わりにbefore-upload属性を使用できることがわかりました。これは関数型属性です。デフォルトのパラメータは現在のファイルです。このファイルを渡すことができれば、効果が得られます。 このメソッドに合格するには、新しい formdata オブジェクトを作成し、postman テストと同様に、このオブジェクトにキーと値を追加する必要があります。 インターネット上で何人かの人が挙げた具体的な例は、ほぼ次の通りである。 beforeUpload (ファイル) { fd = new FormData() とする fd.append('キー', ファイル, ファイル名) axios.post(url, fd. //いくつかの操作を実行する}) false を返します // false は自動アップロードされないことを意味します。後で試してみたところ、すべて同じで、自動アップロードされないことがわかりました}, これはいいアイデアだと思うので、書き留めておきました。 beforeUpload (ファイル、ID) { fd = new FormData() とする fd.append('キー', ファイル, ファイル名) axios.post(url, fd. データ:{ id:id } }) false を返します // false は自動アップロードされないことを意味します。後で試してみたところ、すべて同じで、自動アップロードされないことがわかりました}, すると、何をしても id しか渡せないことがわかりました。PHP コードでは、dump(_FLIES) は常に NULL でした。これは非常に厄介でした。長い間検索しましたが、解決策は見つかりませんでした。その後、使用する Content-Type は multipart/form-data である必要があることがわかりましたが、f12 のデバッグ ページは application/json; charset=utf-8 でした。これが原因かもしれないと思い、コードにヘッダーを追加しました。 beforeUpload (ファイル、ID) { fd = new FormData() とする fd.append('キー', ファイル, ファイル名) axios.post(url, fd. データ:{ id:id }, ヘッダー: { 'コンテンツタイプ': 'マルチパート/フォームデータ' } }) false を返します // false は自動アップロードされないことを意味します。後で試してみたところ、すべて同じで、自動アップロードされないことがわかりました}, 今回報告されたエラーは、axios Missing boundary in multipart/form-data です。境界がありません。非常に迷惑です。 後で、Content-Type は自動的に識別され、境界が追加されることがわかりました。Content-Type は undefined として定義する必要があると言う人もいましたが、それでもうまくいきません。Content-Type は自動的に識別されるだけです。 後で、formdataとdataは一緒に渡せないことが分かりました。formdataを渡す場合はdataを渡すことはできないので、次のように変更する必要があります。 beforeUpload (ファイル、ID) { fd = new FormData() とする fd.append('ファイル', ファイル) fd.append('id',id) axios.post(url, fd, { }) false を返します // false は自動アップロードされないことを意味します。後で試してみたところ、すべて同じで、自動アップロードされないことがわかりました}, それでおしまい。 以下は私のコードです <el-upload クラス="upload-demo" ドラッグ アクション="123" :before-upload="アップロード前" 複数 ref="新規アップロード" :自動アップロード="false" accept=".mp4、.flv、.mov" :on-change="新しいハンドルの変更" :on-success="新しいハンドル成功"> <i class="el-icon-upload"></i> <div class="el-upload__text">ファイルをここにドラッグするか、<em>クリックしてアップロード</em> </div> <div class="el-upload__tip" slot="tip">アップロードできるビデオファイルは .mp4 .flv .mov 形式のみであることに注意してください</div> </el-アップロード> el-button type="primary" @click="newSubmitForm()" class="yes-btn"> OK</el-button> <el-button @click="resetForm('newform')"> リセット</el-button> beforeUpload (ファイル) { console.log(ファイル) fd = new FormData() とする fd.append('ファイル', ファイル) fd.append('グループID', this.グループID) // コンソール.log(fd) newVideo(fd).then(res => { コンソール.log(res) }) 真を返す }, 新しい送信フォーム(){ this.$refs.newupload.submit() }, エクスポート関数 newVideo (データ) { 戻り値: axios({ メソッド: 'post'、 URL: 'http://localhost:8086/Platform1-back-end/public/admin/VideoBase/newVideo', タイムアウト: 20000、 データ: データ }) } axios を 1 つのファイルに入れて、vue ファイルから分離しました。それらはほぼ同じです。 また、アクションに何かを追加すると404エラーが発生しますが、最終的な効果には影響しません。気になる場合は、削除する方法がないか確認してください。 この方式は3つのステップで値を複数回送信する オプション 2 は成功したため試しませんでしたが、無意味であり不便です。 これで、element-ui のアップロード コンポーネントでファイルやその他のパラメータを渡す方法についての記事は終了です。element-ui のアップロード コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Window.nameはクロスドメインデータ転送の問題を解決します
同じサーバーで、Docker を使用して Mysql のマスター スレーブ同期設定をシミュレートしま...
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...
目次1. Dockerをインストールする2. コードを書く3. Dockerfileを書く4. 画像...
1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...
複数の Docker コンテナがデプロイされたサーバーがあり、各 Docker コンテナが stde...
MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...
参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...
この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...
目次仮想DOMとは何ですか?なぜ仮想DOMが必要なのでしょうか?仮想 DOM はどのようにして実際の...
1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...
このチュートリアルでは、LinuxでのMySQL 5.6.33のインストールと設定方法を参考までに紹...
序文MySQL の構文は誰にとっても難しいものではないと思いますが、この記事では主に MySQL の...