Node实现文件（图片、音/视频等）上传

最新推荐文章于 2024-07-13 00:09:19 发布

自酌一杯酒

最新推荐文章于 2024-07-13 00:09:19 发布

阅读量2k

点赞数 1

分类专栏： Node.js JS/JQuery 前端文章标签： node.js javascript

本文链接：https://blog.csdn.net/struggleThunder/article/details/128148647

版权

JS/JQuery 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

Node.js

5 篇文章 0 订阅

订阅专栏

欢迎访问我的个人博客

项目地址

GitHub
码云

项目描述

使用 multer 中间件来储存上传的文件
支持自定义保存到哪个文件目录下

文件上传功能的完整代码

后端

const express = require('express');
const app = express();
const bodyParser = require("body-parser");
const multer = require("multer");
const fs = require('fs');
const path = require('path');

// 设置接口的请求头
app.all("/api/*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // * 表示可以跨域
    res.header("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Authorization");
    res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
    res.header("X-Powered-By", "3.2.1");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});


// 设置强缓存
app.use('*', (req, res, next) => {
    res.setHeader('Cache-Control', 'max-age=10'); // 设置缓存时长 = 当前时间 + max-age；优先级比Expires高
    res.setHeader('Expires', new Date(Date.now() + 10).toUTCString()); // 兼容低版本浏览器的缓存时长
    next();
})


// 使用 body-parser 中间件，limit：支持最大上传文件的大小
app.use(bodyParser.urlencoded({ limit: "20mb", extended: false }));
app.use(bodyParser.json({ limit: "20mb" }));


// resource目录下的资源，设置可以静态访问
app.use("/resource", express.static(path.join(__dirname, "/resource")));


// 储存文件
const storageFile = multer.diskStorage({
    //设置上传后文件路径
    destination: function (req, file, cb) {
        // 要将文件保存到哪个文件夹下面
        const folderName = (req.query.folderName || 'temp').trim();
        // 保存的目录路径
        const savePath = `./resource/${folderName}`;
        // 判断目录路径是否存在，不存在就创建一个目录
        const isExists = fs.existsSync(savePath);
        if (!isExists) {
            fs.mkdir(savePath, function (err) {
                if (err) {
                    cb(null, `./resource/temp`);
                } else {
                    cb(null, savePath);
                }
            })
        } else {
            cb(null, savePath);
        }
    },
    //给上传文件重命名
    filename: function (req, file, cb) {
        const fileFormat = (file.originalname).split(".");
        const newFileName = Date.now() + "." + fileFormat[fileFormat.length - 1];
        cb(null, newFileName);
    }
});


const fileUploadAPIUrl = "/api/uploadFile";

// 此路径使用multer中间件，后面的 file 是自定义的值
app.use(fileUploadAPIUrl, multer({ storage: storageFile }).array("file"));


// 文件上传完成后，会被监听到
app.post(fileUploadAPIUrl, (req, res) => {
    const fileInfo = req.files[0];

    if (!fileInfo) {
        return res.json({
            fail: true,
            msg: "文件上传失败"
        })
    }

    return res.json({
        success: true,
        msg: "文件上传成功",
        data: {
            originalName: Buffer.from(fileInfo.originalname, "latin1").toString(
                "utf8"
            ),
            fileSize: fileInfo.size,
            filePath: '/' + fileInfo.path.replace(/\\/g, '/')
        }
    })
})


const port = 80;
app.listen(port, () => {
    console.log(`服务已启动，端口号：${port}`);
})

前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>

<body>

    <input type="file" id="file" onchange="onUploadFile(this)" />
    <p style="font-size: 11px; color: #f13;">
        提示：选择完文件后，会立即上传到服务器
    </p>


    <script src="./axios.min.js"></script>
    <script>

        function onUploadFile(evt) {
            const file = evt.files[0];

            // ===== 文件上传到服务器 =====
            const fd = new FormData();
            fd.append('file', file);
            // 保存到服务端的哪个文件夹下面，可以自由设置，也可以不填
            const folderName = "images";
            const prefix = "http://127.0.0.1";
            axios({
                method: "POST",
                url: `${prefix}/api/uploadFile?folderName=${folderName}`,
                data: fd,
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }).then(response => {
                const res = response.data;
                if (res.fail) {
                    return alert('文件上传失败')
                }

                // 插入上传成功的文件链接到页面上
                const pEle = document.createElement('p');
                const aEle = document.createElement('a');
                const path = `${prefix}${res.data.filePath}`;
                aEle.innerHTML = path;
                aEle.setAttribute('target', '_blank');
                aEle.setAttribute('href', path);

                pEle.appendChild(aEle);
                document.body.appendChild(pEle);
                
                // 清空表单值
                document.querySelector('#file').value = "";


            }).catch(err => {
                console.error(err);
            });

        }

    </script>

</body>

</html>