multer实现文件上传功能全解（form上传、fetch请求上传、多文件上传）

最新推荐文章于 2024-05-29 10:57:47 发布

置顶在下月亮有何贵干

最新推荐文章于 2024-05-29 10:57:47 发布

阅读量5.4k

点赞数 9

分类专栏：开发工作中的小问题文章标签：前端 node.js express multer

本文链接：https://blog.csdn.net/weixin_43877799/article/details/121421758

版权

开发工作中的小问题专栏收录该内容

30 篇文章 1 订阅

订阅专栏

安装express和multer

npm i express multer -S

基础使用

前端表单

enctype必须指定multipart/form-data，因为multer只支持这种。
name的值“logo”对应服务器upload.single中的“logo”。

    <form action="/postFile" method="post" enctype="multipart/form-data">
        <input id="postFile" type="file" name="logo">
        <button type="submit">上传</button>
    </form>

后端服务器文件

dest对应上传的文件的目录地址。
upload.single的值“logo”对应前端name中的“logo”。

import express from 'express'
import multer from 'multer'

const app = express()

const upload = multer({ dest: 'uploads/' })

app.post('/postFile', upload.single('logo'), (req, res) => {
    res.send(req.file)
})

app.listen(3000, () => {
    console.log('服务器开启中')
})

启动服务。
在这里插入图片描述
去页面选择文件上传一张图片，上传成功。

配置上传文件名

我们发现虽然上传了，但是文件不是我们想要的样子，没有后缀，也不知道是我们上传的图片文件。

我们可以对multer进行详细的配置。

destination配置上传文件的位置
filename配置文件名，可以利用file上传文件的内容进行配置:

import express from 'express'
import multer from 'multer'

const app = express()
// const upload = multer({ dest: 'uploads/' })

const upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './uploads/')
        },
        filename: function (req, file, cb) {
            // fieldname是表单的name值，也就是我们设定的“logo”，
            // originalname是文件上传时的名字，可以根据它获取后缀，
            // encoding，mimetype 我就不详细介绍了，可以自行输出查看。
            const { fieldname, originalname, encoding, mimetype } = file
            const after = originalname.split('.')[1] ? '.' + originalname.split('.')[1] : '.jpg'
            cb(null, fieldname + after);
        }
    })
})

app.post('/postFile', upload.single('logo'), (req, res) => {
    res.send(req.file)
})

app.listen(3000, () => {
    console.log('服务器开启中')
})

然后我们重启服务器，再上传一次图片，就有了。
在这里插入图片描述

使用fetch上传文件

后端问题解决了我们看看前端的问题，表单上传文件不仅拓展差，还会跳转新页面，令人头疼。

我们肯定更希望用js中的fetch手动上传。如果还不会使用fetch可以先移步：fetch异步请求使用详解

我们去掉form表单，自定义一个上传事件。

我的前端页面在8080端口，也做了nginx代理请求到3000端口，你们可以自行修改成自己的请求。
body.append(‘logo’, file)这里的作为key的“logo”代替了原本表单中的name值“logo”的作用。
虽然是post请求，但是不要添加请求头’Content-Type’: ‘multipart/form-data’，上传文件时post已经自动帮你识别了，再加就要报错了。

<body>
    <input id="postFile" type="file" name="logo">
    <button type="button" onclick="upload()">上传</button>
</body>
<script>
    const upload = async () => {
        const body = new FormData()
        const file = document.getElementById('postFile').files[0]
        if (file) {
            body.append('logo', file)
            const response = await fetch('http://localhost:8080/postFile', {
                method: 'post',
                body
            })
            const res = await response.json()
            console.log(res)
        } else {
            alert('请选择文件！')
        }
    }
</script>

多文件上传

前端表单

input加上multiple，支持多文件。
因为现在是多文件了，就不直接取文件，我们先获取用id获取dom，遍历添加进body，记得“logo”要对应后台“logo”。

<body>
    <input id="postFile" type="file" name="logo" multiple>
    <button type="sub" onclick="upload()">上传</button>
</body>
<script>
    const upload = async () => {
        const body = new FormData()
        const postFile = document.getElementById('postFile')
        if (postFile.files[0]) {
            for (const file of postFile.files) {
                body.append('logo', file)
            }
            const response = await fetch('http://localhost:8080/postFile', {
                method: 'post',
                body
            })
            const res = await response.json()
            console.log(res)
        } else {
            alert('请选择文件！')
        }

    }
</script>

后端服务器文件

upload.single(‘logo’)改成upload.array(‘logo’, 3)，后面的数字是限制上传文件数。
命名我们就用本来的名字，好区分不同的文件。

import express from 'express'
import mysql from 'mysql'
import multer from 'multer'

const app = express()
// const upload = multer({ dest: 'uploads/' })

const upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './uploads/')
        },
        filename: function (req, file, cb) {
            const { fieldname, originalname, encoding, mimetype } = file
            // const after = originalname.split('.')[1] ? '.' + originalname.split('.')[1] : '.jpg'
            cb(null, originalname);
        }
    })
})

app.post('/postFile', upload.array('logo', 3), (req, res) => {
    res.send(req.files)
})

app.listen(3000, () => {
    console.log('服务器开启中')
})

大功告成，有帮助的话不妨点个赞吧，如果有什么问题可以评论区提出，会及时更新解决。

在下月亮有何贵干

关注

9
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
multer实现文件上传功能全解（form上传、fetch请求上传、多文件上传）

目录安装express和multer基础使用配置上传文件名使用fetch上传文件安装express和multernpm i express multer -S基础使用前端表单enctype必须指定multipart/form-data，因为multer只支持这种。name的值“logo”对应服务器upload.single中的“logo”。 <form action="/postFile" method="post" enctype="multipart/form-dat
复制链接

扫一扫