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

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

推薦する

DIVのぼかし機能を実装する方法

マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...

nginx でディレクトリ ホワイトリストと IP ホワイトリストを設定する方法

1. ディレクトリホワイトリストを設定する:指定されたリクエストパスに制限を設定しないでください。た...

CSS 水平プログレスバーと垂直プログレスバーの実装コード

時々、素敵なスクロールバー効果を見るのは楽しいものです。ここでは、CSSを使用してそれを実現する方法...

CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...

SSHのssh-keygenコマンドの基本的な使い方の詳細な説明

SSH 公開鍵認証は、SSH 認証方式の 1 つです。 SSH パスワードフリーのログインは公開鍵認...

Docker マイクロサービス用の ETCD クラスターの構築に関する詳細なチュートリアル

目次etcdの機能etcdが独自の高可用性クラスタを構築するには、主に3つの形式があります。今回構築...

FTP環境設定ソリューション(vsftpd)の詳細な説明

1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...

node.js で PC 上の WeChat アプレット パッケージを復号化するための処理アイデア

目次アプレットのソースコードはどこにありますか? PC ミニプログラムはどのように暗号化されますか?...

MySQL で group by を使用すると常にエラー 1055 が発生します (推奨)

MySQL で group by を使用すると常にエラー 1055 が発生するため、原因を確認する...

MySQLがbinlogファイルを手動で登録し、マスタースレーブ異常を引き起こす理由

1. 問題の原因友人の @水米田 から、POSITION に基づくマスタースレーブについて質問があり...

Mac で Docker を使用して Oracle をデプロイする方法

Mac で Docker を使用して Oracle をデプロイする方法まずdockerをインストール...

CentOS7.3 での MySQL 8.0.13 のインストールと設定のチュートリアル

1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...

vue-router からのフロントエンドルーティングの 2 つの実装

目次モードパラメータハッシュ履歴ハッシュ履歴.push()ハッシュ履歴.replace()アドレスバ...

イントラネット侵入を実現するためのSSHポート転送

LAN 内のマシンは外部ネットワークにアクセスできますが、外部ネットワークは内部ネットワークにアクセ...

Linux環境にJDKとTomcatをインストールする詳細な手順

目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...