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はクロスドメインデータ転送の問題を解決します

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

推薦する

Docker環境でMySQLを実行し、Binlogを有効にしてマスタースレーブ同期を構成する方法

同じサーバーで、Docker を使用して Mysql のマスター スレーブ同期設定をシミュレートしま...

Linux コマンドラインからファイルを削除する実用的な方法

rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...

Pythonで書かれたWebアプリケーションをDockerでデプロイする実践

目次1. Dockerをインストールする2. コードを書く3. Dockerfileを書く4. 画像...

フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介

1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...

HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題

HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...

Docker ログが多すぎてディスクがいっぱいになる場合の対処方法

複数の Docker コンテナがデプロイされたサーバーがあり、各 Docker コンテナが stde...

MySQLでテーブルデータを削除する方法

MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...

Linux における SUID、SGID、SBIT の素晴らしい使い方の詳細な説明

序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...

JavaScript の差異を利用して比較ツールを実装する

序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...

JS でカルーセル効果を実現する 3 つの簡単な方法

この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...

Javascript 仮想 DOM の詳細な説明

目次仮想DOMとは何ですか?なぜ仮想DOMが必要なのでしょうか?仮想 DOM はどのようにして実際の...

CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...

Linux での MySQL 5.6.33 のインストールと設定のチュートリアル

このチュートリアルでは、LinuxでのMySQL 5.6.33のインストールと設定方法を参考までに紹...

MySQLでの少し複雑な使用例コード

序文MySQL の構文は誰にとっても難しいものではないと思いますが、この記事では主に MySQL の...