这边是一个简单的前端与后台的上传，后端的话是使用node.js来写的一个接口。
先看代码吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<input type="file" />
</form>
<button>点击上传图片</button>
<img src="http://127.0.0.1:3000/getimg" alt="" />
<script>
let form = document.querySelector("form");
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
let formData = new FormData(form);
formData.append("file", form.children[0].files[0]);
let xhr = new XMLHttpRequest();
xhr.open("post", "http://127.0.0.1:3000/upload");
xhr.send(formData);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.response);
}
}
};
});
</script>
</body>
</html>
后台代码
const express = require("express");
const multiparty = require("multiparty");
const app = express();
const fs = require("fs");
app.post("/upload", (req, res) => {
let form = new multiparty.Form({ uploadDir: "./upload" });
form.parse(req, (err, fields, files) => {
console.log(fields, "fields");
console.log(files, "files");
});
res.setHeader("Access-Control-Allow-Origin", "*");
res.send("hello");
});
app.get("/getimg", (req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*");
fs.readFile("./upload/1.png", (err, data) => {
console.log(data);
res.send(data);
});
});
app.listen(3000, () => {
console.log("苍蝇拍的服务器启动");
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
