圖床服務(wù)器是一種用于存儲和管理圖片的服務(wù)器，可以給我們提供將圖片上傳后能外部訪問瀏覽的服務(wù)乎澄。這樣我們在寫文章時插入的說明圖片答恶，就可以集中放到圖床里饺蚊，既方便多平臺文章發(fā)布，又能統(tǒng)一管理和備份悬嗓。
在 linux 上安裝 node 環(huán)境
1污呼、去官網(wǎng)下載
下載成功后用 WinSCP 上傳至 /root 目錄
執(zhí)行命令解壓安裝
tar -xvf node-v12.18.1-linux-x64.tar.xz
創(chuàng)建文件夾 ~/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 開發(fā)框架
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 // 啟動服務(wù)
??到這就證明已成功部署 node demo 服務(wù)了!
圖床-支持多張上傳
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 // 上傳文件 創(chuàng)建FormData let formData = new FormData() // 遍歷FileList對象，拿到多個圖片對象 for (let i = 0; i < files.length; i++) { // formData中的append方法 如果已有相同的鍵声诸，則會追加成為一個數(shù)組 注意:這里需要使用formData.getAll()獲取 formData.append('upFile', files[i], files[i].name) } console.log(formData.getAll('upFile')) // 將formdata發(fā)送到后臺即可 // 我用的 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()) // 允許直接訪問靜態(tài)文件 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(''); //重命名文件 加上文件后綴 // 這里的路徑問題一定要注意：本瓜反復(fù)測試了很多才發(fā)現(xiàn)是“路徑問題導(dǎo)致不能正常修改文件名” 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
效果展示：多圖上傳泻肯，返回圖床鏈接，支持預(yù)覽慰照，大功告成Ｔ钚（樣式自行優(yōu)化啦！）
