表單與檔案上傳的問題 - 已解決

#1

問題背景與敘述 :

Angular HTTP POST form-data 這篇是舊的, BrowserXhr 查文件顯示棄用

一開始是以 FormData 去包資料,然後用 formData.append() 慢慢塞
這樣可以 work ,只是 FormData value 的型別要另外處理,只能收 string | blob 檔案

image

因為很怪,所以看一下其他網路上的範例,發現這樣寫好像不太對,所以試了一下包成 JSON

image

看起來乾淨很多,但是 input 上傳的 type='file' 在 Obj 中,MIME type 會遺失 (後端想做驗證) ,只剩下 (C:\fakepath…)

想請教,一般而言 有檔案上傳( 常見 jpg 大頭照 等) 和 表單內容,在 Angular 或 業界的慣用處理是如何處理呢 ?

自己想說是不是 表單和檔案上傳的api分開就好?

#2

你要自己做的話,可以參考這篇

我的專案是使用其他人提供的套件
https://aberezkin.github.io/ng2-image-upload/#/readme
透過改[extensions]之類的參數,可以限定成excel之類的檔案

1個讚
#3

看了一下裡面的 demo 好像處理部分也是包成 Form Data 。
想順便請教比如一個填寫履歷基本資料的表單,含檔案上傳 (PDF 比如resume, jpg 比如個人照片)
像這樣一張表單的post API ,後端的檔案會做驗證嗎 ?

我遇到的問題是 post 回去的資料
image

如果包在 Obj 裡面,MIME type會遺失,只剩下

{
 file: 'C:\fakepath\file.jpg'
}

後端說不能驗證 :frowning:

#4

你有兩段的post,我只針對第一段做調整,欄位名稱沒調整就針對你的內容調整

一般來說,你要上傳檔案,應該是把檔案做append到一個獨立的欄位
但你的作法是把整個form塞進一個欄位,這樣後端在拿到的資料上,應該比較容易有問題

你可以先試試看這樣改會不會有幫助

-    formData.append('formControlGroup', this.formControlGroup.value);
+    formData.append('formControlGroup', this.formControlGroup.get('testFile').value);
1個讚
#5

我是使用send as binary data
宣告selectedFile: File
post selectedFile到後端

1個讚
#6

感謝大大回覆 :pray:

有試過 把檔案做append到一個獨立的欄位 ,這樣沒問題。
但是,從form表單取出的檔案,content-type 就消失了

上面是直接從檔案做append到一個獨立的欄位
下面是 formControlGroup 取 get(file).value


不好意思讓大家一直回覆不清不楚的問題 :frowning:

最後一個問題 :
JSON作為資料結構 接收 form 表單,其中有 type='file' ,而且保留 content-type(MIME) 給後端做驗證,是有辦法實做的嗎 ?

如果不能(目前試起來結果是不能),下面哪一種做法比較常見:

sample code A:


{
 "name": "ashe",
 "age": 5,
 "jpgFile": "C:\\fakepath\\info.JPG"
}

sample code B (分兩支api):

// form 表單的 value
{
 "name": "ashe",
 "age": 5,
}
// form 表單的 file
formData.append('jpgFile', this.formControlGroup.get('jpgFile').value));
#7

JSON作為資料結構 接收 form 表單,其中有 type='file' ,而且保留 content-type(MIME) 給後端做驗證,是有辦法實做的嗎 ?
不能,MIME的格式就沒辦法吃你的JSON

提供我的做法給你參考
model :
export class Item {
name: string;
age: string;
jpgFile: File;
}

service:
uploadFile(params: Item): Observable<HttpResponse> {
const httpParams = new FormData();
Object.keys(params).forEach(function(key) { httpParams.append(key, params[key]); });
return this.http.post<HttpResponse>(url, httpParams);
}

1個讚