element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-cli3.0+element-ui アップロードコンポーネント el-upload の使用
  • element-ui アップロード コンポーネントを使用して複数のファイルをアップロードするためのサンプル コード
  • Vue2.0は、画像プレビュー効果を実現するために、element-uiのアップロードコンポーネントを使用します。
  • vue プロジェクトで element-ui の Upload コンポーネントを使用する例

<<:  Window.nameはクロスドメインデータ転送の問題を解決します

>>:  つまり、フィルターコレクション

推薦する

Ubuntuが仮想マシンでインターネットに接続できない問題の解決策

インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

CSS3 で z-index が効かない問題の解決方法

最近、CSS3 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多...

Vueのトランジションとアニメーションの深い理解

1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...

HTML でナンバープレート番号と州の略語を入力するためのサンプルコード

原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボード...

MySQL 実行ステータスの表示と分析

MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...

forループ内のvarの問題の解決

序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...

スケルトンスクリーン効果を実現する CSS

ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...

デザインのヒント: きっと気に入っていただけると思います

<br />このタイトルを見ると、見覚えがあるかもしれません。多くのウェブサイトが同様の...

Vueはデータを初期状態にリセットします

場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、...

MySQLの3値ロジックとNULLの詳細な説明

目次NULLとは何か2種類のNULLなぜ「= NULL」ではなく「IS NULL」と書く必要があるの...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

docker compose を使用して FastDfs ファイル サーバーをインストールする詳細な例

ドッカーの作成 バージョン: '2' サービス: fastdfsトラッカー: ホスト...

WeChatミニプログラムでのマップの正しい使用例

目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...

JavaScript サンドボックスの探索

目次1. シナリオ2. サンドボックスの基本機能3. iframeの実装4. Webワーカーの実装5...