文件上传

文件上传 multer

1. 安装

npm i multer

2. 引入

const multer = require('multer')

3. 使用
   这里给出一个 form 表单案例的使用：

• 表单

// 表单的类型 必须是 multipart/form-data
<form action="/upload" enctype="multipart/form-data" method="post">
    姓名：<input type="text" name="username"><br>
    // 上传文件时 input 表单类型必须是 type
    头像：<input type="file" name="avatar"><br>
    <button type="submit">提交</button>
</form>

• 如果使用的是点击上传

// 点击事件
btn.addEventListener('click', () => {
    // 要处理成表单对象上传
    const formsdata = new FormData();
    formsdata.append('username', username.value);
    formsdata.append('password', password.value);
    // 追加name值，和文件对象
    formsdata.append('avatar', avatar.files[0]);

    axios.post('/user/upload/avatar', formsdata, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
    }).then(res => {
      document.querySelector('img').src = res.data.imgPath;
    });
  });

// 后端
const express = require('express')
const router = express.Router()
const multer = require('multer')
const UserModel = require('../../models/UserModles')
// const uplaoder = multer('public/uploads')
// 如果要添加保存时的文件后缀和文件路径，需要添加如下配置
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 文件存放路径
        cb(null, 'public/uploads')
    },
    filename: function (req, file, cb) {
        // console.log(file) // 打印出 file,其中有一个 originalname 就是上传文件的完整名字，从而进行拼接
        cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.')[1])
    }
})
/* file:{
  fieldname: 'avatar',
  originalname: 'h1.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg'
} */
const uplaoder = multer({ storage })

// uploader.single('avatar') 其中 avatar 必须和前端 input 的 name 一致
router.post('/upload', uplaoder.single('avatar'), (req, res) => {
    // console.log(req.files, req.body)
    UserModel.findOne({ username: req.body.username }).then(data => {
        UserModel.updateOne({ username: data.username }, { file: `/uploads/${req.file.filename}` }).then(data => {
            res.send('ok')
        })
    }).catch(err => {
        res.send(err)
    })
})

• 批量上传

// 表单：
头像：<input type="file" name="avatar" multiple><br>

// 后端：
// uploader.array('avatar',文件上传的数量)
router.post('/upload', uplaoder.array('avatar', 12), (req, res) => {
    console.log(req.files, req.body)
    let files = req.files.map(file => {
        return `/uploads/${file.filename}`
    })
    UserModel.findOne({ username: req.body.username }).then(data => {
        UserModel.updateOne({ username: data.username }, { file: files.toString() }).then(data => {
            res.send('ok')
        })
    }).catch(err => {
        res.send(err)
    })
})

• 限制文件类型

// 在 multer.diskStorage 内：
destination: function(req, file, cb) {
    if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png' || file.mimetype==='image/gif') {
      cb(null, 'public/uploads'))
    } else {
      cb({ error: '仅支持 jpg/png/gif 格式的图片！' })
    }
  },

• 限制文件上传大小

const multerConfig = multer({
  storage: storage,
  limits: { fileSize: 1024 * 1024 * 2 } // 2M
})