node 图片上传文件上传 multer

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>

最后编辑于：2021.01.19 18:27:49

node 图片上传 文件上传 multer

node 图片上传文件上传 multer