ステップピットVUE + axiosアップロードファイルの解析

問題を完全に理解し、そして今再び再下盤んしませんでした、すべてのフロントエンド開発者がファイルのアップロード機能を実行するためにインターンシップの前に、発生しますされたファイルをアップロードします。

1. FORMDATA axiosを使用せずにファイルをアップロード、ファイルをアップロードするためには、学校で前に行っています。ターゲットを生成FORMDATA

聞かせてFORMDATA = 新しいいるFormData（）
formData.append（ 'XXX'、 'YYYYY'）

入力ファイルに[0] DOM操作により得られ、その後の詳細なAPIオンラインFORMDATAオブジェクトを追加します

マルチパート/フォームデータの魚でなければなりません使用されたファイルをアップロードするときの背景2.私は、ファイルを受け入れることができない前にaxiosの毛を使用した後にする前に使用方法、問題は、コンテンツタイプは、アプリケーション/ JSON、コンテンツ型です。私たちは、ファイルをアップロードする際に、このconten型が自動的にマルチパート/フォームのデータになりますが、なぜ私のJSONがそれだと言っているかのように、インターネットのいくつかの理解を読みます。axios本体における重要な問題

axios.interceptors.request.use（
  リクエスト => { 
    store.dispatch（ 'はhttpStatus'、{状態： ''、statusMsg： '' }）
     戻り要求
  }、
  エラーが => {
     戻りPromise.reject（誤差）
  } 
）

傍受を作り、に戻るために私たちの要求にaxios、我々はFORMDATAオブジェクトに変更されます。この時間は、ブラウザがアプリケーション/ JSONを与えるので、私たちの操作に失敗しました

3.どのようにこの問題を解決するには？

　　私たちが私たちのaction.jsの設定を変更3.1 axios

せコンフィグ= { 
    ヘッダー：{
      「マルチパート/フォームデータ」：「コンテンツタイプ」
    } 
  }

当然の結果は、どのように簡単に私はそれを取得してみましょうことができません！！！背景エラー--- NOマルチパートの境界が見つからなかった、なくなって二段分離器システムでは、我々はマニュアルを追加することができます

コンフィグ=せて{ 
   {ヘッダー
     'のContent-Type'： 'マルチパート/フォームデータ;境界=' + 新。日付（）getTime（）
    } 
}

することができますが、私はまだ非常に良いではない感じ、私たちは、私がメンターと一緒に掲示オンライン方法、見て以来、物事のヘッダを変更する必要があります。

　　3.2新しいaxiosインスタンスを作成し、プロトタイプVUEでハングアップ

　　この記事を特に参照するとhttps://www.jianshu.com/p/1405f389fb1d

　　3.3プログラムに、action.jsで、三番目の引数の設定axios私のメンターは、transformRequestを追加

せコンフィグ= { 
    ヘッダー：{
       'のContent-Type'： 'マルチパート/フォームデータ' 
    }、
    transformRequest：[ 関数（データ）{
       戻りデータ
    }] 
  }

私はAPIをチェックし、この方法については、彼がデータを変更する要求を、サーバに送信する前にtransformRequestを言うために許可され、このデータは、このようなセット設定した後、問題が解決され、コールバックを変更することができます

ステップピットVUE + axiosアップロードファイルの解析

おすすめ