如何使用FormData上傳壓縮裁剪後的圖片Blob物件

在前端頁面，我們通常會遇到需要使用者上傳圖片的操作，可能還會在前端進行圖片編輯的操作（比如頭像的選區裁剪），然後如果圖片過大的話，我們還會對圖片進行壓縮。這些功能我們通常透過Canvas來進行，最後使用Canvas API函式toDataURL來得到圖片的Base64字串，然後當我們要上傳到後臺的時候，會面臨2種選擇：

• 直接將圖片的Base64字串Post到後端進行處理和儲存
• 在前端將Base64字串轉換成二進位制的Blob物件形式，再使用常規的檔案上傳形式（即FormData）來將其上傳到後端

第一種方式對前端來說比較簡單，主要的處理邏輯在後端。而第二種的話前端的工作就稍微複雜一些。考慮到後端採用接收二進位制檔案的方式來處理檔案上傳的情況比較多，所以我們來看一下前面所說的第二種情況在前端怎麼來實現，以下是主要的示例程式碼：

程式碼中值得注意的一點是下面這行程式碼：

formData.append("file", blob, file.name); 

如果不傳第三個引數的話，生成的表單資料中，上傳檔案對應的filename會被設定為blob：

通常情況下這也是沒問題的。但是可能由於後端使用的不同框架或自己的邏輯程式碼的原因，對上傳的檔名做了強制的字尾名檢查，會發生報錯導致上傳失敗，遇到這種情況，請記得使用上面的方式加上第三個引數，這樣問題應該就能迎刃而解了。