Axios 通过 FormData 上传文件
1.FormData先容FormData 是一个用于在客户端创建表单数据的接口。可以通过 JavaScript 中的
new FormData() 构造函数创建。FormData 可以将表单字段的键值对以键值对的方式添加，
同时也支持添加文件。
2.FormData 的主要优点:
[*]可以异步上传文件
[*]可以上传二进制文件
[*]提交表单时主动处置惩罚表单数据编码
[*]可以上传文件流(Blob 对象和 File 对象)
3.FormData 对象上传文件
3.1第一种：直接在 FormData 中添加文件
将文件对象作为 value，添加到 FormData 中，axios 会主动对文件举行编码。
const formData = new FormData();
formData.append('file', fileInput.files); // fileInput 为 <input type="file" />
axios.post('/upload', formData) 3.2第二种：设置 request header 的 Content-Type
const formData = new FormData();
formData.append('file', fileInput.files);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}) 调用样例：
function uploadFile() {
const fileInput = document.querySelector('#fileInput');
const file = fileInput.files;
// 使用FormData对象上传文件
const formData = new FormData();
formData.append('file', file);
axios.post('http://localhost:8089/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response.data);
}).catch(error => {
console.error('上传失败', error);
});
} 4.选择文件案例
html：
<!DOCTYPE html>
<html>
<head>
<title>文件上传Demo</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="uploadFile()">上传文件</button>
<script src="axios.min.js"></script>
<script src="main.js"></script>
</body>
</html> JavaScript：
function uploadFile() {
const fileInput = document.querySelector('#fileInput');
const file = fileInput.files;
// 使用FormData对象上传文件
const formData = new FormData();
formData.append('file', file);
axios.post('http://localhost:8089/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response.data);
}).catch(error => {
console.error('上传失败', error);
});
} 5.图片base64转file上传案例
let imgBase64 = "data:image/jpeg;base64,/9j/......"
const formData = new FormData();
formData.append('file', base64ToFile(imgBase64,"pointFile.jpg"));
pointUpLoadFile(formData) function base64ToFile(base64Data, filename) {
const parts = base64Data.split(';base64,');
const contentType = parts.split(':');
const raw = window.atob(parts);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array = raw.charCodeAt(i);
}
const blob = new Blob(, {type: contentType});
const file = new File(, filename, {type: contentType});
return file;
} function pointUpLoadFile(formData){
axios.post('http://localhost:8089/upload',formData,{
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response=>{
console.log('上传成功', response.data);
}).catch(error=>{
console.error('上传失败', error);
})
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]