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

General
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

image
image.png553×630 14.6 KB

不好意思讓大家一直回覆不清不楚的問題 :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個讚