关键词：formData，Ajax，express，formidable
项目文件结构
- 创建如下结构的文件夹
express
|---public
|---|---formdata.html
|---uploads
|---app.js
-
导入express：
npm i express -
导入formidable：
npm i formidable
HTML
- 在public文件夹下创建formData.html，内容如下：
<form id="form">
<label>文件<input type="file" name="file" /></label>
<br />
<input type="button" value="提交" id="submit" />
</form>
<script>
const form = document.querySelector("#form");
submit.onclick = () => {
// js内置对象
const formData = new FormData(form);
// 创建ajax对象
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
console.log(this.response);
}
};
xhr.open("post", "http://localhost:3000/uploads");
xhr.send(formData);
};
</script>
express
- 在express文件夹下创建app.js，内容如下：
// 导入express库
const express = require("express");
// 导入node的path库
const path = require("path");
// 解析formData
const formidable = require("formidable");
// 实例化express，创建web服务器
const app = express();
// 静态资源访问
app.use(express.static(path.join(__dirname, "public")));
// 创建路由
app.post("/uploads", (req, res) => {
const form = formidable({
// 表单解析
multiples: true,
// 设置服务端接受文件的位置(在app.js所在文件夹下
// 创建一个uploads文件夹)
uploadDir: path.join(__dirname, "uploads"),
// 设置是否保留文件后缀
keepExtensions: true,
});
});
// 监听端口
app.listen(3000);
console.log("服务器启动成功");
运行
在浏览器打开：http://localhost:3000/formdata.html ，将会显示：
然后选择文件，提交。
结果
可见uploads文件夹下多了一个.gif图片。
express写法参考：使用formidable模块上传文件的一些问题
