express实现上传文件_express 文件上传-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44813858/article/details/132646801

本文介绍了如何使用Express框架实现文件上传功能。通过定义userModel、创建前端模板和添加接口，结合multer插件处理头像文件，实现了将上传的图片保存至public/uploads，并将文件名存储在数据库中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单实现一个form，提交表单至数据库实现查询功能，提交的数据包括常用字段（用户名，密码，年龄）和上传的头像文件。

定义userModel

const mongoose = require('mongoose')

const Schema = mongoose.Schema

const UserType = new Schema({
    username: String,
    password: String,
    age: Number,
    avatar: String
})
const UserModel = mongoose.model('user', UserType)
module.exports = UserModel

完成前端模板

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1>上传页面</h1>
<form action="/api/user" method="POST" enctype="multipart/form-data">
    <!--    上传文件：multipart/form-data-->
    <div>
        用户名：<input type="text" name="username"/>
    </div>
    <div>
        密码：<input type="password" name="password"/>
    </div>
    <div>
        年龄：<input type="number" name="age"/>
    </div>
    <div>
        头像：<input type="file" name="avatar"/>
    </div>
    <div>
        <input type="submit" value="添加用户"/>
    </div>
</form>
<script>

</script>
</body>
</html>

添加接口写法：

为了能接收处理头像文件，需要安装一个插件： multer

const multer = require('multer')
// 接受二进制文件： 将上传的资源放到public下面的uploads文件夹下
const upload = multer({dest: 'public/uploads/'})

// upload.single: 单个上传，upload.array('avatar',13):多个上传
router.post('/user', upload.single("avatar"), function (req, res, next) {
    const {username, password, age} = req.body //接受前端传递参数
    // muter会在req上挂载一个file字段，其中会有filename属性
    const avatar = req.file ? `/uploads/${req.file.filename}` : '/images/default.jpg'
    UserModel.create({
        username,
        password,
        age,
        avatar
    }).then(data => {
        console.log({data})
        res.send({
            code: 0,
            message: '',
            data: null
        })
    })
});

此时会将avrtar的字段写成一个string类型，即新生成的文件名存储在数据库中。而上传的静态文件则会被保存至public/uploads文件夹下。

前后端分离上传实现：

  // 上传事件
            register.onclick = () => {
                console.log(username.value, password.value, age.value, avatar.value)
                const params = new FormData()
                params.append('avatar', avatar.files[0])
                params.append('username', username.value)
                params.append('password', password.value)
                params.append('age', age.value)
                const config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('api/user', params, config).then(res => {
                    console.log({res})
                })

            }
// 查询回显：
 fetch('/api/user?page=1&limit=10').then(res => res.json()).then(res => {
                console.log(res)
                const tbody = document.querySelector("tbody")
                tbody.innerHTML = res.map(item => `
                <tr>
                    <td>${item._id}</td>
                    <td>${item.username}</td>
                    <td>${item.age}</td>
                    <td><img src="${item.avatar}"></td>
                </tr>
            `).join('')
            })

完成~