エル・アップロード中VUEは、複数の画像をアップロードしてパラメータを運ぶのではなく、解決策の1回分ずつ

さて、基本的なフロントエンド技術スタックは、VUEテクノロジー・スタックを反応していません。

VUE技術スタックは、最も一般的な要素-UIのUIフレームワークです。

一括アップロード:プロジェクトでは、私たちはしばしば、この需要が発生しました

要素-UIは確かに私たちは<EL-アップロード>は、このようなコンポーネントは、同僚が私たちの使用するためのプロパティとメソッドの多くを暴露提供します。

しかし、多くの人々は、このような問題が発生しています。プロジェクトは、一括アップロードである必要がありますが、なぜ、自分の時間をアップロード成功したことが、それは1つのアップロードによって一つであり、時には我々のニーズに違反しないこの方法をアップロードし、時にはそれは我々が必要とするものではありません。だから、どのように一括アップロードパラメータを解決し、それを運ぶために、私は、ここにデモを書きました

あなたの参考のために:

1  < テンプレート> 
2    < DIV > 
3      < EL-形態> 
4        < EL-フォーム項目> 
5          < EL-アップロード
 6            REF = "アップロード" 
7            行動を= "/として" 
8            複数
 9            :HTTPリクエスト= "handleUpload " 
10            :自動アップロード="偽" 
11            :リミット= "20" > 
12            < EL-ボタンサイズ= "小" タイプ="「プライマリ> [アップロード]をクリックします</ EL-ボタンは> 
13である           < DIV スロット= "ヒント" クラス= "EL-upload__tip" > 500キロバイト以上のJPG / PNGファイルをアップロードし、することはできません。</ divの> 
14          </ EL-アップロード> 
15        </ EL-アイテム形態> 
16        < EL-フォームアイテム> 
17          < ELボタン-のタイプ= "プライマリ" @click = "handlePush" ></ EL-ボタン> 
18である       </ EL-フォームアイテム> 
19      </ EL-形態> 
20     
21    </ DIV > 
22  </ テンプレート> 
23  < スクリプト> 
24  からインポートaxios ' axios ' 
25  からインポート{mapGetters} ' vuex ' 
26  エクスポートデフォルト{
 27個の   データ(){
 28        リターン{
 29個の         ファイル:[]
 30        }。
31      }、
 32は   計算:{
 33      ... mapGetters([
 34        ' taxno ' 35        'ユーザ名' 
36      ])
 37    }は、
 38である   方法:{
 39      HandleUpload(RAW){
 40        この.files.push(raw.file);
 41である     }、
 42は     (){非同期handlePush
 43は       )の$ refs.upload.submit(。//は、ここにファイルアップロードを行うための機能である、実際には、それが私たちのファイルをアップロードするために取得することである
44        letのFD =  新しい新しいいるFormData();
 45        fd.append(演算子この.username)
 46        fd.append(reimment ニッケルチュチュ" 47        fd.append(' DEPTNAME ' " 技術48        fd.append(' taxno ' この.taxno)
 49        この.files.forEach(関数(ファイル){
 50          fd.append(' ファイル' 、ファイル、file.name); // 複数のファイルをアップロードしたいので、あなたはトラバースの仕事を見てする必要があります
51          // 直接、あなたは背景が2つのオブジェクトに渡された見つけることができますアップロードするファイルの私達の配列を使用していない
52        })
 53        axios.post(process.env.BASE_API + " /ファイル/ moreFileUpload'FD).then(RES => {
 54          であれば(res.data.status === ' OK ' ){
 55            にconsole.log(RES)
 56          }
 57        })
 58      }
 59    }
 60  }
 61  </ スクリプト>

<EL-アップロード>そのためには、デフォルトのアップロード、カジュアルな雰囲気それに文字列でない場合、action属性が必要、そうされます。

あなたが運ぶのパラメータをチェックしない場合は、フォームを確認することができます。その後、チェックして、その上にアップロードインターフェースを介して転送する場合。

 

うまくいけば、あなたの助けのために、この記事!

ソースを記入してください:レンガの庭のブログ2019年7月30日の壁「エル・アップロード中VUEは、複数の画像をアップロードし、パラメータ、バルクではなく、一つの解決策ずつ運びます。」

おすすめ

転載: www.cnblogs.com/helena000/p/11272200.html