node图片服务器

作者: 猪猪9527 | 来源:发表于2018-01-22 14:19 被阅读7次

node图片服务器
node 接收、发送 form-data 数据
01-Three.js 安装以及介绍
使用kubeadm快速部署kubernetes v1.13.1
Spark学习笔记三：Spark Standalone集群搭建
Node.js学习——HTTP服务器与客户端（二）
angular (6)与服务器通信
搭建Web服务器-Node.js
一、架构01-搭建日志服务器Rsyslog
Linux服务器安装node环境

今天写了个图片上传的小demo并部署到腾讯云【Ubuntu】

准备工作：

腾讯云开放3000 端口

Mac OS

apt-get update  
apt-get install -y python-software-properties software-properties-common  
apt-get install nodejs

node 后台运行

sudo npm install forever -g   #安装
forever start app.js          #启动
forever stop app.js           #关闭
forever start -l forever.log -o out.log -e err.log app.js   #输出日志和错误

查看日志

tail -f out.log

项目目录结构

full.png

app.js

"use strict";
exports.__esModule = true;
var express = require("express");
var multer = require("multer");
var storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, './public');
    },
    filename: function(req, file, cb) {
        cb(null, `${Date.now()}-${file.originalname}`)
    }
})
var upload = multer({ storage: storage });
var app = express();
app.use("/",express.static(__dirname + "/public"));

app.post('/uploadimg', upload.array('imgfile', 40), function(req, res, next) {
    var files = req.files
    console.log(files)
    if (!files[0]) {
        res.send('error');
    } else {
        res.send('success');
    }
    console.log(files);
})

var server = app.listen(9999, 'localhost', function() {
    console.log('server is running at port 9999...');
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .thumbPic {
            width: 100px;
            height: 100px;
            margin: 1px;
            border: 1px solid #ccc;
            padding: 1px;
            min-width: 100px;
            overflow: hidden;
        }
        
        .progress {
            width: 100vw;
            height: 100vh;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10;
            background-color: rgba(1, 1, 1, 0.3);
        }
        
        #progress {
            background: green;
        }
        
        .thumbPic img {
            width: 100%;
            height: 100%;
        }
        
        .preview {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            padding: 2px;
        }
        
        input[type="button"] {
            width: 5em;
            height: 2em;
            position: relative;
            top: -9px;
            display: inline-block;
            color: #eee;
            background-color: seagreen;
            outline: none;
            border: none;
            cursor: pointer;
            letter-spacing: 2px;
            font-family: '黑体';
        }
        
        #file {
            z-index: 10;
            width: 30px;
            opacity: 0;
            position: absolute;
            left: 0px;
            cursor: pointer;
            top: 0px;
        }
        
        #upload {
            margin-left: 100px;
        }
        
        .selectImg {
            display: inline-block;
            width: 30px;
            cursor: pointer;
            height: 27px;
            background-position: -206px -87px;
            background-image: url(data:image/png;base64,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)
        }
        
        .wrap {
            position: relative;
        }
        
        .wrap a {}
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传
    </title>
</head>

<body>
    <!--<form action="uploadimg" method="POST" enctype="multipart/form-data">
        <input type="file" name="imgfile" multiple>
        <input type="submit" value="提交">
    </form>-->
    <div class="wrap">

        <a href="" class="selectImg" title="上传图片"></a>
        <input type="file" multiple id="file">
        <input type="button" value="上传" id="upload">
        <div class="preview"></div>
        <div class="progress">
            <progress max="100" value="1" item-width="100" id="progress"></progress>
        </div>
    </div>
    <script>
        var aUpload = document.querySelector('.selectImg')
        var button = document.querySelector('#upload')
        var fileinput = document.getElementById('file')
            // aUpload.addEventListener('click', function(e) {

        //     var evt = new MouseEvent('click', {
        //         bubbles: false,
        //         cancelable: true,
        //         view: window
        //     })


        //     return fileinput.dispatchEvent(evt)

        // }, false)
        button.onclick = uploadFile

        let previewDOM = document.getElementsByClassName('preview')[0]
        fileinput.onchange = () => {
            //console.log('dddd')
            var files = fileinput.files
            let imgDOMArray = new Array(files.length)
            let reader = []
            let thumbPic = []
            progressDOM = document.getElementById('progress-img')
            for (let i = 0; i < files.length; i++) {
                reader[i] = new FileReader()
                thumbPic[i] = document.createElement('div')
                imgDOMArray[i] = document.createElement('img')
                imgDOMArray[i].file = files[i]
                thumbPic[i].className = 'thumbPic'
                thumbPic[i].appendChild(imgDOMArray[i])
                previewDOM.appendChild(thumbPic[i])
                reader[i].readAsDataURL(files[i])
                reader[i].onload = (img => {

                    return e => {
                        img.src = e.target.result
                    }
                })(imgDOMArray[i])

            }
        }

        function uploadFile() {
            //  console.log('ddd')
            var xhr = new XMLHttpRequest()
            var formdata = new FormData()

            var files = fileinput.files
            if (!files[0]) {
                alert('请先选择图片，再上传！')
                return
            }

            var progress = document.querySelector('progress')
            for (let i = 0; i < files.length; i++) {
                formdata.append('imgfile', files[i], files[i].name)
            }
            xhr.open('POST', '/uploadimg')
            xhr.onload = () => {
                if (xhr.status === 200 && xhr.responseText === 'success') {
                    previewDOM.innerHTML = ''
                    xhr = null
                    alert('图片上传成功！')
                }
            }
            xhr.send(formdata)
            xhr.upload.onprogress = e => {
                if (e.lengthComputable) {
                    var progressWrap = document.querySelector('.progress')
                    progressWrap.style.display = "flex"
                    var percentComplete = e.loaded / e.total * 100
                    progress.value = percentComplete

                    if (percentComplete >= 100) {
                        progress.value = 0
                        progressWrap.style.display = "none"
                    }
                }
            }

        }
    </script>
</body>

</html>

node图片服务器
今天写了个图片上传的小demo并部署到腾讯云【Ubuntu】准备工作：腾讯云开放3000 端口 Mac OS...
node 接收、发送 form-data 数据
一、背景：node作为中间层服务转发数据，接收客户端图片，并传至其他服务器。（基于 koa2框架、node-fet...
01-Three.js 安装以及介绍
安装依赖搭建本地服务器 Node.js server 为什么要搭建一个服务器呢？当页面需要加载外部图片或者模...
使用kubeadm快速部署kubernetes v1.13.1
服务器信息 192.168.1.200 Master,node 192.168.1.201 Node 服务器初始化...
Spark学习笔记三：Spark Standalone集群搭建
服务器准备准备四台服务器Node01、Node02、Node03、Node04，其中Node01做Mater，N...
Node.js学习——HTTP服务器与客户端（二）
1.实验目的使用Node.js实现服务器发送图片给客户端。 2.实验方法通过使用http模块实现服务器...
angular (6)与服务器通信
<1>web服务器 1、使用node.js创建服务器 node.js可以用typescript语言来开发；node...
搭建Web服务器-Node.js
Node.js介绍 Node.js 是一种新兴的服务器语言，用 Javascript开发服务器。 Node.js ...
一、架构01-搭建日志服务器Rsyslog
搭建日志服务器 1、环境配置环境： node01 192.168.32.132 rsyslog服务器 node0...
Linux服务器安装node环境
总结在Linux服务器上部署node环境 1、下载node 因使用的服务器不能直接连接外网，这里就从node官网下...