express + multer 实现文件上传（一）-- 基本上传

最新推荐文章于 2024-05-24 18:06:27 发布

yun_hou

最新推荐文章于 2024-05-24 18:06:27 发布

阅读量9.3k

点赞数 16

分类专栏： nodejs 文章标签： express multer node

本文链接：https://blog.csdn.net/yun_hou/article/details/96869219

版权

nodejs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

express框架，实现文件上传主要用到了 multer 插件

准备工作：

创建一个express项目，并支持html，教程请转至 nodejs+express+pm2 搭建服务器

安装依赖：

npm install --save multer

开始编码：

1、routers 文件夹下新建 upload.js 文件

const express = require('express');
const router = express.Router();
const multer = require('multer');

let upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './uploads/');
        },
        filename: function (req, file, cb) {
            var changedName = (new Date().getTime())+'-'+file.originalname;
            cb(null, changedName);
        }
    })
});

//单个文件上传
router.post('/single', upload.single('singleFile'), (req, res) => {
    console.log(req.file);
    res.json({
        code: '0000',
        type: 'single',
        originalname: req.file.originalname,
        path: req.file.path
    })
});

//多个文件上传
router.post('/multer', upload.array('multerFile'), (req, res) => {
    console.log(req.files);
    let fileList = [];
    req.files.map((elem) => {
        fileList.push({
            originalname: elem.originalname
        })
    });
    res.json({
        code: '0000',
        type: 'multer',
        fileList: fileList
    });
});

module.exports = router;

2、在项目根目录下创建 uploads 文件夹

3、app.js 引入改文件并使用

//引入路由
const multerUpload = require('./routes/upload');
//使用路由
app.use('/upload', multerUpload);

4、在 views 文件夹下创建 index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 单文件上传 -->
    <div class="single">
        <div class="title">单个文件上传</div>
        <input type="file" name="singleFile" id="singleFile">
        <button class="submit">上传</button>
        <img src="" alt="" id="img">
    </div>
    
    <div class="multer">
        <div class="title">多个文件上传</div>
        <input type="file" name="multerFile" id="multerFile" multiple>
        <button class="submit">上传</button>
    </div>


    <div class="upbefore">
        <div class="title">可多次点击添加按钮，并预览</div>
        <div id="imgs"></div>
        <input type="file" id="upgteimg" value=""/>
        <button class="submit">上传</button>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // 单文件上传
        $('.single .submit').on('click', function () {

            var fileList = $('#singleFile')[0].files;
            console.log(fileList);
            var formData = new FormData();
            //此处文件名必须为 singleFile ，因为后台设置仅接口此文件名
            formData.append('singleFile', fileList[0]);

            $.ajax({
                url: '/upload/single',
                type: 'post',
                processData: false,
                contentType: false,//使用multer配合ajax时无需配置multipart/form-data，multer将自动配置，手动配置将报错，boundary not found
                data: formData,
                success: function (data) {
                    console.log(data)
                    $('#img').attr('src', data.path)
                }
            })
        });

        // 多文件上传
        $('.multer .submit').on('click', function () {

            var fileList = $('#multerFile')[0].files;
            console.log(fileList);
            var formData = new FormData();

            for (let i = 0; i < fileList.length; i++) {
                //此处文件名必须为 multerFile ，因为后台设置仅接口此文件名
                formData.append('multerFile', fileList[i]);
            }

            $.ajax({
                url: '/upload/multer',
                type: 'post',
                processData: false,
                contentType: false,
                data: formData,
                success: function (data) {
                    console.log(data)
                }
            })
        });

        // 可多次点击添加按钮，并预览
        let arr = [];
        let src = [];

        $('#upgteimg').on('change', function () {
            let $this = $(this)
            let url = URL.createObjectURL($this[0].files[0]);
            src.push(url);
            arr.push($this[0].files[0]);
            console.log(arr);
            console.log(src);
            showImg()
        })
        function showImg() {
            let html = ''
            for (let i = 0; i < src.length; i++) {
                const element = src[i];
                html += `<img src="${element}" alt="">`
            }
            $('#imgs').html(html);
        }
        $('.upbefore .submit').on('click', function () {
            var formData = new FormData();
            for (let i = 0; i < arr.length; i++) {
                //此处文件名必须为 multerFile ，因为后台设置仅接口此文件名
                formData.append('multerFile', arr[i]);
            }
            $.ajax({
                url: '/upload/multer',
                type: 'post',
                processData: false,
                contentType: false,
                data: formData,
                success: function (data) {
                    console.log(data)
                }
            })
        })
    </script>
</body>

</html>

5、启动服务即可

yun_hou

关注

16
点赞
踩
40

收藏

觉得还不错? 一键收藏
3
评论
express + multer 实现文件上传（一）-- 基本上传

express框架，实现文件上传主要用到了multer插件准备工作：创建一个express项目，并支持html，教程请转至nodejs+express+pm2 搭建服务器安装依赖：npm install --save multer开始编码：1、routers 文件夹下新建 upload.js 文件const express = require('expre...
复制链接

扫一扫