原生js上传图片
无样式上传图片
创建一个 FormData 对象：这个对象可以用于存储数据。
将文件添加到 FormData 对象：通过 append() 方法，将用户选择的文件添加到 formData 对象中。
使用 fetch 发送请求：使用 fetch API 或者其他方法将 FormData 对象发送到服务器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片上传</title>
</head>
<body>
<!-- 文件上传 -->
<input type="file" id="fileInput" onchange="uploadImage()" />
<script>
// 上传图片的函数
function uploadImage() {
// 获取文件输入框元素
const fileInput = document.getElementById("fileInput");
// 创建formData对象，用于存储要上传的文件数据
const formData = new FormData();
formData.append("file", fileInput.files[0]); // 将选中的文件添加到formData对象中
// 请求接口
fetch("http://yikatong.kuxia.top/pc/common/upload", {
method: "POST",
body: formData, // 请求体是formData对象，其中包含文件数据
})
.then((response) => response.json()) // 服务器响应成功后，解析JSON格式的响应数据
.then((data) => {
console.log("上传成功:", data);
})
.catch((error) => {
console.error("上传失败:", error);
});
}
</script>
</body>
</html>
有样式的上传图片
就是把图片回显的地方盖着输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片上传</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.box {
display: flex;
}
/* 添加虚线边框 */
#image {
width: 100px;
height: 100px;
border-radius: 5px;
margin-left: -100px;
}
</style>
<body>
<div class="box">
<!-- 文件上传 -->
<input
type="file"
id="fileInput"
onchange="uploadImage()"
style="height: 100px; width: 100px; opacity: 0"
/>
<!-- 用于回显图片 -->
<img id="image" src="/img/add.svg" />
</div>
<script>
const fileInput = document.getElementById("fileInput"); // 获取上传文件框
const image = document.getElementById("image"); // 获取回显图片框
function uploadImage() {
const formData = new FormData(); // 创建formData对象，用于存储要上传的文件数据
formData.append("file", fileInput.files[0]); // 将选中的文件添加到formData对象中
// 请求接口
fetch("http://yikatong.kuxia.top/pc/common/upload", {
method: "POST",
body: formData, // 请求体是formData对象，其中包含文件数据
})
.then((response) => response.json()) // 服务器响应成功后，解析JSON格式的响应数据
.then((data) => {
console.log("上传成功:", data.data.url);
// 回显图片
image.src = "http://yikatong.kuxia.top" + data.data.url;
})
.catch((error) => {
console.error("上传失败:", error);
});
}
</script>
</body>
</html>