前提・実現したいこと
csvファイルのアップロードシステムを構築してます。
ネットの記事を参考にして構築をしてみたのですが、'multipart/form-data'
はどのような構成でバックエンド側に送られているのかがわかりません。
なので、どのような形でjavaで引数を受け取ればいいのかがわからないです。
具体的にはCsvUp(@FormDataParam("file") InputStream inputStream)ここの引数をどう定義すればCSVのbyteとファイルの名前をform-dataから受け取れるか？
formData.append("file[]"）
とあるのですが、file[]配列にどのようにnameとbyte列のデータが入っているでしょうか？
Jsonのような形で入っているのでしょうか？
また配列の中をみる方法を教えてほしいです。
フロント：Angular （html, css, typescript）
バックエンド：Java EE 、Glassfish
また,FormDataのなかがこのような感じでどこに名前やcsvfileが入っているか理解できていないです。
FormData {}
__proto__: FormData
append: ƒ append()
delete: ƒ delete()
entries: ƒ entries()
forEach: ƒ forEach()
get: ƒ ()
getAll: ƒ getAll()
has: ƒ has()
keys: ƒ keys()
set: ƒ ()
values: ƒ values()
constructor: ƒ FormData()
Symbol(Symbol.iterator): ƒ entries()
Symbol(Symbol.toStringTag): "FormData"
__proto__: Object
###エラー
ファイルのアップロードを実行すると以下のエラーが出てしまいます。
HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "Bad Request", url: "http://localhost:8080/application/app/service/csv-upload", ok: false, …
該当のソースコード
java
1
2 @Produces(MediaType.APPLICATION_JSON)
3 @Path("csv-upload")
4 @Consumes(MediaType.MULTIPART_FORM_DATA)
5 @POST
6 public boolean CsvUp(@FormDataParam("file") InputStream inputStream) throws Exception {
7 try {
8 CsvReader.PushFileWithIndex(file, file.name);
9 return true;
10 } catch (Exception e) {
11 return false;
12 }
13 }
html
1 <ngx-dropzone (change)="onSelect($event)">
2 <ngx-dropzone-label>Drag and drop here</ngx-dropzone-label>
3 <ngx-dropzone-preview *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
4 <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
5 </ngx-dropzone-preview>
6 </ngx-dropzone>
ts
1public formData = new FormData();
2 onSelect(event: any) {
3 console.log(event);
4 if(this.files && this.files.length >=3) {
5 this.onRemove(this.files[0]);
6 }
7 this.files.push(...event.addedFiles);
8
9 for (var i = 0; i < this.files.length; i++) {
10 this.formData.append("file[]", this.files[i]);
11 }
12 console.log(this.formData)
13 console.log(this.files)
14 console.log(this.formData.getAll('files[]'));
15 console.log(this.formData.get('file[]'))
16
17 this.http.post('http://localhost:8080/application/app/service/csv-upload', this.formData, this.Options)
18 .subscribe(res => {
19 console.log(res);
20
21 })
22 }
Q&A
