Nodeexpress搭建后台，接收前端传来的文件

Node搭建后台服务器，接收前端传来的文件

用到的npm包

npm install express multer body-parser uuid --save

文件目录

文件目录介绍

controller：用于存放上传文件逻辑
middle：multer包逻辑
router：路由
uploads：从前端上传来的文件

搭建一个服务器

// index.ts
import express from "express"
import homeRouter from "./router/home"
import bodyParser from "body-parser";
const app = express();
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use("/api", homeRouter)
app.listen(928, () => {
  console.log('running 928')
})

文件上传路由逻辑

// home.ts
import { Router } from "express"
import { homeUpload } from "../controller/home.controller"
const router = Router()
router.post("/file", homeUpload)
export default router

multer配置

// upload.ts
import multer from "multer"
import { v1 as uuidV1 } from "uuid"
import fs from "fs"
import path from "path"
import { Request } from "express"
const memoryDest = path.resolve("./uploads")
const storage = multer.diskStorage({
// 文件存储位置
  destination: (req, file, cb) => {
  // 校验文件夹是否存在，如果不存在则创建一个
    const isExists = fs.existsSync(memoryDest)
    if (!isExists) {
      fs.mkdirSync(memoryDest)
    }
    cb(null, memoryDest)
  },
  filename: (req, file, cb) => {
  	// 生成唯一文件名
    const uid = uuidV1();
    // 获取文件扩展名
    let ext = path.extname(file.originalname)
    cb(null, uid   ext)
  }
})
// 过滤文件
function fileFilter(req: Request, file: Express.Multer.File, callback: multer.FileFilterCallback): void {
  if (!file) {
    callback(null, false)
  } else {
    callback(null, true)
  }
}
export const upload = multer({
// 文件大小校验
  storage: storage, fileFilter: fileFilter, limits: {
    fileSize: 20 * 1024 * 1024
  }
}).single("file")

文件上传逻辑

import fs from "fs"
import path from "path"
import { upload } from "../middle/upload"
import { MulterError } from "multer"
const fileType = ["image/jpg", "image/jpeg", "image/png"]
export const homeUpload = (req, res): void => {
  upload(req, res, function (multerErr) {
    if (multerErr instanceof MulterError) {
      if (multerErr.code === "LIMIT_FILE_SIZE") {
        res.status(200).json({ code: 400, message: "文件最大只能上传20M" })
      } else {
      }
    } else {
      if (req.file) {
        const filePath = path.resolve(req.file?.destination as string, req.file?.filename as string)
        if (!fileType.includes(req.file.mimetype)) {
          fs.unlinkSync(filePath)
          res.status(200).json({ code: 400, message: "不支持此类型文件" })
        } else {
          fs.readFile(req.file.path, (err, data) => {
            if (err) {
              throw err
            }
            fs.writeFile(filePath, data, (fsErr) => {
              if (fsErr) {
                res.status(200).json({ code: 400, message: fsErr })
              }
              res.status(200).json({ code: 200, message: "上传成功" })
            })
          })
        }
      } else {
        res.status(200).json({ code: 400, message: "请上传文件" })
      }
    }
  })
}

使用APIFox请求测试

执行结果

遇到Bug需要帮助，欢迎加wx：xmzl1988

这篇好文章是转载于：学新通技术网