使用 FormData上传file文件 使用接口通过FormData上传头像
文件选择标签
type="file" 属性可以获取选择文件
accept="image/*" 推荐选择 图片类 /* 通配,所有
placeholder 提示信息
语法:
1. `accept`属性引导用户选择文件
1. 多个用`,`分隔
2. `image/*`，所有图片
3. 它定义了文件 input 应该接受的文件类型
2. `onchange`会在选择的文件改变时触发
3. `files`属性可以获取选择的文件
<body>
<!-- 文件选择标签
type="file" 属性可以获取选择文件
accept="image/*" 推荐选择 图片类 /* 通配,所有
placeholder 提示信息
语法:
1. `accept`属性引导用户选择文件
1. 多个用`,`分隔
2. `image/*`，所有图片
3. 它定义了文件 input 应该接受的文件类型
2. `onchange`会在选择的文件改变时触发
3. `files`属性可以获取选择的文件
-->
<input
type="file"
name="avatar"
accept="image/*"
placeholder="请选择头像"
/>
<script>
// change 内容发生变化时触发
const inpit = document.querySelector('[type="file"]');
inpit.addEventListener("change", (e) => {
// files[0] 上传文件的信息 文件流
console.log(e);
console.log(e.target);
// 后续把相关的信息给到后端
console.log(e.target.files[0]);
});
</script>
</body>
使用接口直接通过FormData 上传头像
<body>
<h2>直接通过FormData</h2>
<!-- e.target.files[0] -->
<!-- 推荐用户选择 图片 -->
<input type="file" accept="image/*" />
<img src="" alt="" />
<!-- 点击按钮 上传用户选择的图片 -->
<button>上传</button>
<script src="./lib/axios.js"></script>
<script>
// 1.点击按钮上传图片
document.querySelector("button").onclick = () => {
// 1.1获取上传的文件、图片
const img = document.querySelector('[type="file"]').files[0];
// console.log(img);
// 1.2将上传的文件存起来
const data = new FormData();
data.append("avatar", img);
// console.log(data.get("avatar"));
// 1.3发送请求 把数据增加到后端
axios({
method: "post",
url: "http://ajax-api.itheima.net/api/file",
data,
}).then((res) => {
console.log(res);
// 1.4把图片显示在页面
document.querySelector("img").src = res.data.data.url;
});
};
</script>
</body>
