最近、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. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...
この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...
目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...
商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみま...
Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...
より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...
コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...
序文サーバーシステム環境は、CentOS 6.5 (最終) です。 FFmpeg をサーバーに正常に...
CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...
この記事では、MySQL 5.7.21のインストールとインストール中に発生した問題を参考までに紹介し...
iPadなどのモバイル端末の普及により、人々がモバイル端末で読書に費やす時間はますます長くなり、読...
データボリュームの使用開始先ほどのケースでは、ホストからコンテナにデータをコピーする必要がある場合、...
proxy_intercept_errors と recursive_error_pages を使...
目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...