在前后端分離的項目開發中,前端需要向后端發送數據,而后端接口需要接收 JSON 格式的數據。但是,前端常常使用 FormData 對象來封裝表單數據,這個對象并不是 JSON 格式。因此,需要將 FormData 轉化為 JSON。
function formData2Json(formData) { let obj = {}; formData.forEach((value, key) =>{ obj[key] = value; }); return JSON.stringify(obj); }
上面這段代碼將 formData 轉化為了 JSON 格式。formData 提供了一個 forEach 方法,用來迭代 formData 中包含的鍵值對。將其中的鍵值對解析出來,使用對象來存儲,最后使用 JSON.stringify 方法將對象轉化為 JSON 字符串。
但是,上面這段代碼只能轉換最簡單的 FormData 對象。對于包含上傳文件的 FormData,我們需要借助第三方插件來完成。
function formData2Json(formData) { const obj = {}; formData.forEach((value, key) =>{ if (value instanceof FileList) { obj[key] = checkFileList(value); } else { obj[key] = value; } }); return JSON.stringify(obj); } function checkFileList(list) { const arr = []; for (let i = 0; i< list.length; i++) { const file = list.item(i); const obj = { name: file.name, size: file.size, type: file.type, }; arr.push(obj); } return arr; }
上面這段代碼用到了 checkFileList 函數,它將文件列表轉化為一個對象數組。這里解釋一下 checkFileList 函數中的代碼。file.name 表示文件名,file.size 表示文件大小,file.type 表示其 MIME 類型。最后,將這些屬性分別存儲到一個對象中,然后將這些對象依次存儲到數組 arr 中。
這種方法可以將 FormData 轉化為 JSON 格式,以便于前端向后端傳輸數據。