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

2022-05-13 1510

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： multer实现文件上传功能全解（form上传、fetch请求上传、多文件上传)

安装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('服务器开启中')
})

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

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

目录

安装express和multer

基础使用

配置上传文件名

使用fetch上传文件

多文件上传

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

目录

安装express和multer

基础使用

配置上传文件名

使用fetch上传文件

多文件上传

热门文章

最新文章

相关电子书