在 linux 上搭建 express 图床服务(支持多图上传),奥利给!

前言

话不多说,直接开撸🦌!

在 linux 上安装 node 环境

  1. 去官网下载

    下载成功后用 WinSCP 上传至 /root 目录

  2. 执行命令解压安装
tar -xvf node-v12.18.1-linux-x64.tar.xz

  1. 创建文件夹 ~/app/nodejs,然后移到该目录下(方便管理)
mv node-v12.18.1-linux-x64 ~/app/nodejs
  1. 全局配置 node
sudo ln -s ~/app/nodejs/node-v12.18.1-linux-x64/bin
  1. 查看是否安装成功
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 服务了!

图床-支持多张上传

  1. npm install formidable
  2. npm install multer
  3. 新建文件夹目录 uploads
  4. 新建 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>
  1. 修改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)
  1. 查看进程,杀死进程,重启
netstat -ntlp
kill -9  NODE_PID
node app.js

如果在 aliyun 云控制台直接

ctrl + c
node app.js
  1. 效果展示:多图上传,返回图床链接,支持预览,大功告成!(样式自行优化啦!)

结语

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

github 地址开源不易,需要你鼓励!

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

原文链接:juejin.im

上一篇:vue flask nginx socketio实现服务器推送(demo实现一个聊天室)
下一篇:JS 数据类型的种类、判断以及转换

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    2 个月前
  • 项目总结 - 构建vue cli3.0+express项目

    简介:本篇是记录搭建流程,不过多叙述,搭建的细节,主要以前端为主,项目是主要是为了重构前端代码,后端代码完全复用,还会有篇主要讲node项目的搭建 项目背景: 开发环境前后端同时实现热加载...

    2 年前
  • 通过变量来使用next()在expressjs未来中间件

    cchamberlainuser2791897(https://stackoverflow.com/users/769871/cchamberlain)提出了一个问题:passing variable...

    2 年前
  • 解决Linux无法正常安装与卸载Node.js的方

    前言 Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。学习Nodejs首先需要会安装环境。

    2 年前
  • 笔记:解读express 4.x源码

    此为裁剪过的笔记版本。 原文在此:https://segmentfault.com/a/11...(https://segmentfault.com/a/1190000000577149) 感谢@...

    2 年前
  • 程序员如何优雅的记录笔记(同步云端,图床,多端发布)

    前言 作为每天coding的我们呢大部分,都有自己记录的方式,相信大家,有道和印象都使用过,并且感觉良好,尤其是云端同步,唯一不足,就是没有我们每天搬砖的编辑器快捷键那么充足,几乎满足了所有需求,...

    2 年前
  • 深入剖析Express cookie-parser中间件实现

    文章导读 cookieparser 是Express的中间件,用来实现cookie的解析,是官方脚手架内置的中间件之一。 它的使用非常简单,但在使用过程中偶尔也会遇到问题。

    2 年前
  • 新手教程:linux服务器搭建Node.js环境

    安装Node.js环境 1、刚买的新服务器 2、下载最新的稳定版 v6.10.3 到本地 结果测试: 3、下载完成后进行解压 结果检测: 4、将解压的 目录移...

    2 年前
  • 文件的上传与下载实现(react、express,create-react-app脚手架)

    项目结构为前后端分离,中间布了一层node。 文件上传 要求:将文件信息等发送到后台。 html代码 客户端上传文件时的信息处理 可以使用FormData来异步上传一个二进制文件。

    2 年前
  • 探讨Express Router & Route

    基于 Node.js 平台,快速、开放、极简的 web 开发框架 安装 成功生成后,会产生以下的目录和文件: 接下来我们通过: 启动程序后,访问127.0.0.1:3000,就...

    2 年前

官方社区

扫码加入 JavaScript 社区