11. 文件上传

于2022-11-07 11:15:04发布

文件上传需要使用到第三方库multer，先安装

npm i multer -S

单文件上传例子

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8080/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name='pic'>
        <button type='submit'>提交</button>
    </form>
</body>
</html>

需要注意的是，enctype需要设置成"multipart/form-data"

node

const express = require('express');
const multer = require('multer'); // 引入
const fs = require('fs');

const server = express();
server.use(express.static('./www'));
console.log('server is runing...');
server.listen('8080');

const upload = multer({
    dest: './www/upload/' // 配置文件上传后的存放路径
}).single('pic'); // single 代表单文件上传，这里的pic需要和html的input的name的值一致

server.post('/upload', (req, res) => {
    upload(req, res, function (err) {
        if (err) {
            res.send(err);
        } else {
            const file = req.file;
            /**
             * file对象的属性如下
             * {
                    fieldname: 'pic', // 和html的input的name一致
                    originalname: '403.gif', // 文件原来的名字
                    encoding: '7bit',
                    mimetype: 'image/gif', // 文件类型
                    destination: './www/upload/', // 文件存放的路径
                    filename: '1c3de7bbf387daa9ab5019ebc67cd874', // 随机生成的字符串，这个字符串就是上传后的文件名字
                    path: 'wwwupload1c3de7bbf387daa9ab5019ebc67cd874', // 全路径
                    size: 164227 // 大小
                }
            */
            let oldFileName = file.destination + file.filename; // ./www/upload/1c3de7bbf387daa9ab5019ebc67cd874
            let newFileName = file.destination + file.filename + '-' + file.originalname; // ./www/upload/1c3de7bbf387daa9ab5019ebc67cd874-403.gif，需要注意的是这里不能直接用file.destination + file.originalname，不然下次再上传同一样名字的文件的话，旧的文件会被新的文件覆盖
            /**
             *  上传成功后重命名。
             *  因为上传文件成功后，如果不做任何处理，文件的名字默认是用filename来命名的。filename没有后缀名，所以需要使用renameSync函数来修改下文件名。给它加上后缀
             *  renameSync函数的作用是重命名。第一个参数是旧的名字，第二个参数是新的名字。比如fs.renameSync('aaa', 'bbb');的意思就是把aaa改成bbb。
             *  注意，renameSync是同步函数，它还有一个异步函数，叫rename。
             */
            fs.renameSync(oldFileName, newFileName);
            res.send('重命名文件成功!');
        }
    })
});

多文件上传

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8080/upload" method="POST" enctype="multipart/form-data">
        <input type="file" multiple name='pic'>
        <button type='submit'>提交</button>
    </form>
</body>
</html>

需要注意的是input需要增加multiple属性

node

const express = require('express');
const multer = require('multer');
const fs = require('fs');

const server = express();
server.use(express.static('./www'));
console.log('server is runing...');
server.listen('8080');

const upload = multer({
    dest: './www/upload/'
}).array('pic', 5);  // 这里改成array，5代表是最多只能一次性上传5个文件

server.post('/upload', (req, res) => {
    upload(req, res, function (err) {
        if (err) {
            res.send(err);
        } else {
            const files = req.files;  // 这里改成files
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                let oldFileName = file.destination + file.filename;
                let newFileName = file.destination + file.filename + '-' + file.originalname;
                fs.renameSync(oldFileName, newFileName);
            }
            res.send('重命名文件成功!');
        }
    })
});