免费入驻
产品入驻解决方案入驻公司入驻案例入驻
登录 · 注册
- 只需一步，快速开始
- 账号登录
- 立即注册
- 找回密码
用户名自动登录找回密码

密码立即注册

IT评测·应用市场-qidao123.com»论坛 › 软件与程序人生 › 移动端开发 › IOS › Axios 通过 FormData 上传文件

Axios 通过 FormData 上传文件

反转基因福娃论坛元老 | 2024-12-31 04:52:04 | 显示全部楼层 | 阅读模式

上一主题

下一主题

楼主

主题 1023|帖子 1023|积分 3069

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[0]); // fileInput 为 <input type="file" />
axios.post('/upload', formData)

复制代码

3.2第二种：设置 request header 的 Content-Type

const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})

复制代码

调用样例：

function uploadFile() {
const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];
// 使用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[0];
// 使用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[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
const blob = new Blob([uInt8Array], {type: contentType});
const file = new File([blob], 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企服之家，中国第一个企服评测及商务社交产业平台。

回复

0 个回复

倒序浏览

快速回复

反转基因福娃

论坛元老

这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储服务器

微信订阅号

微信服务号

微信客服

小程序

H5

关于我们商务合作网站地图

快速回复 返回顶部 返回列表