节点图像上传文件上传器
最编程
2024-07-18 18:13:22
...
node.js
nodejs文件上传炒鸡清楚版
- 我们需要下载模块
npm i express body-parser multer --save
- fileFilter 设置自定义过滤方法
var fileFilter = function (req, file, cb) {
var acceptableMime = ["image/jpeg", "image/png", "image/jpg", "image/gif"];
// 限制类型
// null是固定写法
if (acceptableMime.indexOf(file.mimetype) !== -1) {
cb(null, true); // 通过上传
} else {
cb(null, false); // 禁止上传
}
}
- storage 设置文件服务器存放位置及名称
var path = require("path");
var storage = multer.diskStorage({
//设置 上传图片服务器位置
destination: path.resolve(__dirname, "./upload"),
//设置 上传文件保存的文件名
filename: function (req, file, cb) {
// 获取后缀扩展
let extName = file.originalname.slice(file.originalname.lastIndexOf(".")); //.jpg
// 获取名称
let fileName = Date.now();
console.log(fileName + extName); //12423543465.jpg
cb(null, fileName + extName);
},
});
- limits 设置限制文件大小（可选）
var limits = {
fileSize: "2MB", //设置限制（可选）
}
传入以上三项配置
//单张上传
var multer = require("multer");
const imageUploader = multer({
fileFilter,
storage,
limits
}).single("file"); //文件上传预定 name 或者 字段
--------------------------------------------------二选一
//多张上传
var multer = require("multer");
const imageUploader = multer({
fileFilter,
storage,
limits
}).array("file");
//以上三个字段是固定写法
- node中间使用,注意 express post 需要配置
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())
app.post("/upload", imageUploader, (req, res) => {
res.send("上传成功");
});
前端配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.js"></script>
</head>
<body>
<input type="file" class="file" />
<script>
var oIpt = document.querySelector(".file");
oIpt.addEventListener("change", function (e) {
// console.log(e.target.files[0]);
var file = new FormData();
file.append("file", e.target.files[0]);
axios({
method: "POST",
url: "/upload",
data: file, //传入数据为二进制数据流
});
});
</script>
</body>
</html>
推荐阅读
-
vue 实现文件预览和文件上传、下载、预览 - 多图、模型、dwg 图纸、文档（word、excel、ppt、pdf）
-
腾讯 COS 将文件上传到文件桶中的文件夹，整个路径始终被视为整个文件夹
-
小说漫画系统 fileupload.php 任意文件上传漏洞再次出现
-
国外电子商务系统开发--运维系统文件上传--快速上传
-
文件上传 %00 截断（00 截断）和皮卡丘范围
-
elementUi / elementPlus 自定义上传方法 自定义文件上传
-
springboot+vue+elementui 分片上传大文件
-
前端使用 vue 点击上传文件，然后将文件传输到后端，后端接收文件 II。代码部分
-
微信广告任务平台 ajax_upload 任意文件上传漏洞
-
本地上传文件至服务器的技巧(linux文件压缩及解压文件)