DAY18 - 档案处理 - 上传档案前需要知道的FormData

从前端传输档案到後端可以透过两种形式：

1. base64的格式 (ios, android不支援)
2. FormData

今天要跟大家介绍的就是FormData是什麽～～

FormData 是什麽？

一种Object，前端传送给後端资料的一种形式。FromData 可以让前端利用 javaScritp 模拟表单来传送资料给後端。

FormData 与 档案处理

FormData的一个特点是可以传送二进制档案（File、Blob)，因此可以应用在前端与後端的档案传输。

怎麽建立 FormData

Way1. 透过html的form

<form id="sampleForm">
    <input type="text" >  
</form>
<script>
    const target = document.getElementById('sampleForm');
    let fd = new FormData(target)
</script>

Way2. 透过js建立

let fd = new FormData();

查看FormData的内容

因为FormData基本上就是一个物件，所以会有key,value值

let object = {};
fd.forEach((val, key) => {
  object[key] = val;
});
console.log(object)

如何透过FormData传输档案给後端

step1. 将档案内容加入FormData

因为FormData基本上就是一个物件，所以在传输的时候也是会需要给一组key,value。并且使用append将数值加入FormData。

let blob = 档案内容
let fd = new FormData();
fd.append('name', blob);

step2. 透过API传输给後端时，因为是ＦormData所以记得把header指定为multipart/form-data(这边以axios为例)

 axios.post(apiUrl, fd, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});