axios04-文件上传
Posted 坤小
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了axios04-文件上传相关的知识，希望对你有一定的参考价值。
- axios上传文件没有兼容性问题，还是使用以前的FormData
- 原因： FormData会自动帮你设置请求头为：multipart/form-data;
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>添加英雄</title>
</head>
<body>
<form action="" id="form">
<input type="text" name="name" placeholder="请输入英雄姓名"><br>
<input type="text" name="skill" placeholder="请输入英雄技能"><br>
<input type="file" name="icon" placeholder="请输入英雄头像"><br>
<button id="btn">提交</button>
</form>
<script src="./axios.js"></script>
<script>
/*
本小节知识点：axios上传文件（以ajax课程英雄管理器新增英雄为例）
总结： axios上传文件没有兼容性问题，还是使用以前的FormData
原因： FormData会自动帮你设置请求头为：multipart/form-data;
*/
btn.onclick = function(e)
e.preventDefault();
var fd = new FormData(form);
axios(
url:'http://127.0.0.1:4399/hero/add',
method:'post',
data: fd,
).then(res=>
//成功回调
console.log(res)
);
</script>
</body>
</html>
以上是关于axios04-文件上传的主要内容，如果未能解决你的问题，请参考以下文章
如何在 axios 中获取 onUploadProgress？
axios 发送application/x-www-url-encodedaxios上传文件axios下载文件 ajax下载文件
axios 发送application/x-www-url-encodedaxios上传文件axios下载文件 ajax下载文件
axios 发送application/x-www-url-encodedaxios上传文件axios下载文件 ajax下载文件