在 linux 上搭建 express 圖牀服務（支持多圖上傳），奧利給！

前言

話很少說，直接開擼🦌！html

在 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 雲控制檯直接node

ctrl + c
node app.js
複製代碼

效果展現：多圖上傳，返回圖牀連接，支持預覽，大功告成！（樣式自行優化啦！）

結語

嗚呼！終於有本身的圖牀服務啦！linux

github 地址開源不易，須要你鼓勵！ios

不得不說，Node 真牛，是全部在全棧道路上掙扎前行的前端開發者的福音！JavaScript 是世界上最......git