axios 上傳 formData 很簡(jiǎn)單魔招，請(qǐng)看下面的 demo：
vue
<template>
<input type="file" @change="handleUpload" />
</template>
<script>
import axios from "axios";
export default {
methods: {
handleUpload(e) {
var formData = new FormData();
//e.target.files 獲取fileList對(duì)象里的上傳的file對(duì)象添加到formData里面
formData.append("yourKey", e.target.files[0]);
axios("yourUrl", formData, {
//設(shè)置請(qǐng)求頭
headers: { "Content-Type": "multipart/form-data" },
});
},
},
};
</script>
react
import axios from "axios";
export default function Upload(){
const handleUpload = (e)=>{
var formData = new FormData();
//e.target.files 獲取fileList對(duì)象里的上傳的file對(duì)象添加到formData里面
formData.append("yourKey", e.target.files[0]);
axios("yourUrl", formData, {
//設(shè)置請(qǐng)求頭
headers: { "Content-Type": "multipart/form-data" },
});
}
return <input onChange={handleUpload} />
}
要點(diǎn)
- 所有 type 屬性為 file 的 <input> 元素都有一個(gè) files 屬性,用來(lái)存儲(chǔ)用戶所選擇的文件晰搀。e.target.files[0]獲取 fileList 的第 1 個(gè)文件(file對(duì)象)。
- 在 axios 請(qǐng)求頭中設(shè)置 Content-Type 為 multipart/form-data 办斑。
