一、FormData
XHR 2 添加了一個新的接口 FormData，通過 FormData 對象里面的鍵值對可以模擬表單控件異步上傳二進制文件。
append() 方法會添加一個新值到 FormData 對象內，若已存在也不會覆蓋，可用 getAll() 方法取到指定鍵的所有值。delete() 方法會從 FormData 對象中刪除指定鍵和它所有對應的值。
示例：
const fd = new FormData()
// append
fd.append('age', '24')
fd.append('name', 'Mazey')
fd.append('name', 'Cherrie')
console.log(fd.get('name')) // Mazey
console.log(fd.getAll('name')) // ["Mazey", "Cherrie"]
// delete
fd.delete('name')
console.log(fd.getAll('name')) // []
也可以指定一個 Blob 或 File 作為數據添加到 FormData 對象中：fd.append('file', Blob Object, File Name) 或 fd.append('portrait', formInput.files[0], 'user.png')。
二、Blob
Blob 對象表示一個不可變、原始數據的類文件對象。通過 URL 對象可以創建一個指向類型化數組的 URL，可以當成一個普通的鏈接使用，比如讀取圖片或者視頻。
示例：
const blob = new Blob([JSON.stringify({hello: 'Mazey!'})], {type : 'application/json'})
const url = URL.createObjectURL(blob)
三、實戰：使用 axios 上傳一個 WebM 文件
備注：WebM 由 Google 提出，是一個開放、免費的媒體文件格式。
const blob = new Blob(Webm Object, {type: 'video/webm'})
const formData = new FormData()
formData.append('file', blob, 'mazey-test.webm')
axios({
method: 'post',
url: '/api/video/upload',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(
res => {
console.log('上傳成功！')
}
)
.catch(
err => {
console.log('上傳失敗！')
}
)
