最近、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はクロスドメインデータ転送の問題を解決します
1. 仮想マシンの準備1. 新しい仮想マシンを作成する 2. 仮想マシンのカスタマイズを選択する 3...
この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
購入証明書Alibaba CloudのCloud Shield証明書サービスから購入できます。証明書...
目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...
スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適...
準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...
このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。...
mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル(syslogs)があ...
最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...
目次1. 基本概念2. データベース管理技術の開発3. リレーショナルデータベース(RDBMS)の概...
1. 永続的な統計情報の重要性:統計は、MySQL が実行プランを生成するためのガイドとして使用され...
この記事では、MySQL 8.0 のユーザーとロールの管理について例を挙げて説明します。ご参考までに...
目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...
目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...