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

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

推薦する

NodeJs の高メモリ使用量のトラブルシューティング実戦記録

序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装

この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...

MySQL Community Server 圧縮パッケージのインストールと設定方法

今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...

JavaScript の重要なブレークポイント デバッグ手法の概要 (推奨)

目次デバッガーを使用する理由は何ですか? Chromeデバッガーの基本的な使い方VS Code によ...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...

CSS スタイルで一般的なグラフィック効果を示すサンプルコード

一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...

Nginx のパフォーマンスを向上させるための提案

Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...

VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析

3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...

Navicatをサーバー上のdockerデータベースに接続する方法

dokekrでmysqlコンテナを起動するコマンドを使用します: docker run -p 330...

SVNサービスバックアップ操作手順の共有

SVN サービスのバックアップ手順1. ソースサーバーとターゲットサーバーを準備するソースサーバー:...

CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...

CentOS7 に Redis をインストールして設定する方法

導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...

MySQL sql_modeの適切な設定に関する詳細な説明

MySQL sql_modeの適切な設定sql_mode は見落とされやすい変数です。デフォルト値は...

Linux システムで PATH 環境変数を設定する方法 (3 つの方法)

1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...