在 linux 上搭建 express 图床服务（支持多图上传），奥利给！不得不说，Node 真牛，是所有在全栈道路上挣

前言

话不多说，直接开撸🦌！

在 linux 上安装 node 环境

去官网下载
下载成功后用 WinSCP 上传至 /root 目录
执行命令解压安装

tar -xvf node-v12.18.1-linux-x64.tar.xz

创建文件夹 ~/app/nodejs，然后移到该目录下（方便管理）

mv node-v12.18.1-linux-x64 ~/app/nodejs

全局配置 node

sudo ln -s ~/app/nodejs/node-v12.18.1-linux-x64/bin

查看是否安装成功

 node -v

安装 Express 测试 app.js

Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架

npm install express --save

新建 app.js，开启 3000 端口（并且要在安全组添加3000端口允许访问）

var express = require('express');
var app = express();
app.get('/', function (req, res) {
    res.send('Hello express!');
});
var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
});

node app.js // 启动服务

🆗到这就证明已成功部署 node demo 服务了!

图床-支持多张上传

npm install formidable
npm install multer
新建文件夹目录 uploads
新建 index.html，这里直接贴代码

<body>
    <div style="max-width:1200px;margin:0 auto;text-align: center;margin-top: 150px;">
        <input type="file" class="file" name="file" multiple="multiple" />
        <ul id='urlList'></ul>
    </div>
</body>
<script>
    document.querySelector('.file').addEventListener('change', function (e) {
        let files = e.target.files
        if (!files.length) return
        // 上传文件 创建FormData
        let formData = new FormData()
        // 遍历FileList对象，拿到多个图片对象
        for (let i = 0; i < files.length; i++) {
            // formData中的append方法 如果已有相同的键，则会追加成为一个数组  注意:这里需要使用formData.getAll()获取
            formData.append('upFile', files[i], files[i].name)
        }
        console.log(formData.getAll('upFile'))
        // 将formdata发送到后台即可
        // 我用的 axios.post('url', formData)
        let xhr = new XMLHttpRequest()
        xhr.open('post', '/upload', true)
        xhr.send(formData);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert('success')
                console.log(xhr.responseText)
                let resObj = JSON.parse(xhr.responseText).message;
                let hostport = document.location.host; //ip:端口号
                resObj && resObj.forEach(item => {
                    document.getElementById('urlList').innerHTML += '<a href=http://' + hostport +
                        item + '>' + hostport + item + '</a><br>';
                })
            }
        }
    })
</script>

修改app.js，这里直接贴代码

const express = require('express')
const fs = require("fs");
const app = express()
const path = require('path')
const multer = require('multer')
const multerObj = multer({
    dest: 'uploads/'
}) //上传中间件

app.use(multerObj.any())

// 允许直接访问静态文件
app.use('/uploads', express.static('uploads'));

app.get('/', (req, res, next) => {
    res.setHeader('Content-Type', 'text/html')
    res.sendFile(path.join(__dirname, 'index.html'))
})

app.post('/upload', (req, res, next) => {
    console.log(req.files)
    file = req.files
    resArr = []; // 返给前端做回显 link 
    // 多图：修改文件后缀
    file.forEach((item) => {
        //以下代码得到文件后缀
        name = item.originalname;
        nameArray = name.split('');
        var nameMime = [];
        l = nameArray.pop();
        nameMime.unshift(l);
        while (nameArray.length != 0 && l != '.') {
            l = nameArray.pop();
            nameMime.unshift(l);
        }
        //Mime是文件的后缀
        Mime = nameMime.join('');
        //重命名文件 加上文件后缀
        // 这里的路径问题一定要注意：本瓜反复测试了很多才发现是“路径问题导致不能正常修改文件名”
        fs.rename('./uploads/' + item.filename, './uploads/' + item.filename + Mime, (err) => {
            if (err) {
                console.log(err)
            }
        });
        resArr.push(`/uploads/${item.filename + Mime}`)
    });
    res.send(200, {
        'code': 1,
        message: resArr
    })
})
app.listen(3000)

查看进程，杀死进程，重启

netstat -ntlp
kill -9  NODE_PID
node app.js

如果在 aliyun 云控制台直接

ctrl + c
node app.js

效果展示：多图上传，返回图床链接，支持预览，大功告成！（样式自行优化啦！）

结语

呜呼！终于有自己的图床服务啦！

github 地址开源不易，需要你鼓励！

不得不说，Node 真牛，是所有在全栈道路上挣扎前行的前端开发者的福音！JavaScript 是世界上最......