本人微信公众号：前端修炼之路，欢迎关注

最近做项目的时候有一个上传图片的需求，由于没有后端的配合，所以决定自己来搭个服务器，实现上传图片功能。以后如果需要修改成java或者php为后端，直接使用即可，而不用等到后端联调的时候再去动手。

这里使用的技术为node.js + qiniu nodeJS SDK+ qiniu JS SDK + express + html5。

1. 安装express 和 qiniu

首先需要安装node.js，然后新建一个目录在目录下面依次执行下面的命令



cnpm init

cnpm install express --save

cnpm install qiniu --save

说明：

  • 使用了cnpm替换npm命令，这是因为前者会比后者更快一些。
  • 第一条命令会在目录下创建一个package.json文件，然后在命令行中一路回车就好。
  • 在命令后面添加--save可以在package.json文件的dependencies属性中，将express和qiniu添加上。这样以后换一个目录，在没有node_modules目录时，直接使用npm install就可以安装了。

2.配置七牛 AccessKey/SecretKey

首先肯定是要注册一个七牛账号的。可以点我的分享链接直接注册：https://portal.qiniu.com/sign...

创建一个七牛存储空间，这里假设空间名字为qiniu_test。

在个人中心中，找到密钥管理，创建一个密钥。之后就会生成一个accessKey和secretKey。

回到项目目录下，创建一个config.json，将下面的内容粘贴进去



{

    "AccessKey": "<Your Access Key>",  // https://portal.qiniu.com/user/key

    "SecretKey": "<Your Secret Key>",

    "Bucket": "<Your Bucket Name>",

    "Port": 9000,

    "UptokenUrl": "uptoken",

    "Domain": "<Your Bucket Domain>" // bucket domain eg:http://qiniu-plupload.qiniudn.com/

}

需要替换其中的AccessKey和SecretKey。然后修改Bucket值为刚才创建的qiniu_test。其中的Domain，可以在空间概述中找到一个类似http://qiniu-plupload.qiniudn.com这样域名。以后访问文件的时候，就可以通过这个域名来访问的。

3.配置服务

在项目目录中创建一个server.js，将下面的内容拷贝其中。然后我逐一解释下。



var express = require('express');

var fs = require('fs');

var path = require('path');

var qiniu = require('qiniu');

var app = express();

var config = JSON.parse(fs.readFileSync(path.resolve(__dirname, "config.json")));

var mac = new qiniu.auth.digest.Mac(config.AccessKey, config.SecretKey);

var putExtra = new qiniu.form_up.PutExtra();

var options = {

    scope: config.Bucket,

    deleteAfterDays: 1,

    returnBody: '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","name":"$(x:name)"}'

};

var putPolicy = new qiniu.rs.PutPolicy(options);

var bucketManager = new qiniu.rs.BucketManager(mac, config);

app.get('/index.html', function(req, res) {

    res.sendFile(__dirname + "/" + "index.html");

});

app.get('/api/getImg', function(req, res) {

    var options = {

        limit: 5,

        prefix: 'image/test/',

        marker: req.query.marker

    };

    bucketManager.listPrefix(config.Bucket, options, function(err, respBody, respInfo) {

        if(err) {

            console.log(err);

            throw err;

        }

        if(respInfo.statusCode == 200) {

            var nextMarker = respBody.marker || '';

            var items = respBody.items;

            res.json({

                items: items,

                marker: nextMarker

            });

        } else {

            console.log(respInfo.statusCode);

            console.log(respBody);

        }

    });

});

app.get('/api/uptoken', function(req, res) {

    //    res.send('Hello World!');

    var token = putPolicy.uploadToken(mac);

    res.header("Cache-Control", "max-age=0, private, must-revalidate");

    res.header("Pragma", "no-cache");

    res.header("Expires", 0);

    if(token) {

        res.json({

            uptoken: token,

            domain: config.Domain

        });

    }

});

var server = app.listen(3000, function() {

    var host = server.address().address;

    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);

});
  • 要想往七牛云空间上传图片，一定要用到token这个参数。这个token是通过后端服务器获取出来的，因为我用的是node.js所以用qiniu的nodeJS SDK，如果是其他后端语言，就可以选择别的SDK。
  • 获取这个token需要根据之前配置好的AccessKey和SecretKey。所以通过fs.readFileSync把config.json这个文件中的配置项获取出来。
  • express 就可以接受前端的请求。因为上传之前必须要token，所以提供一个借口api/uptoken，向前端返回拼接好的token字符串。

4.添加测试页面

在项目目录下创建一个index.html，将如下内容拷贝其中



<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>index.html</title>

        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

        <script src="https://unpkg.com/qiniu-js@2.5.1/dist/qiniu.min.js"></script>

    </head>

    <body>

        <h1>测试七牛云上传图片</h1>

        <form action="upload" method="post" enctype="multipart/form-data">

            <input class="file-input" type="file" id="select" />

        </form>

        <div id="result">

        </div>

        <button onclick="clickButton()">请求图片</button>

        <div id="pics"></div>

        <script type="text/javascript">

            var result;

            var fileName;

            var domain = 'http://siberiawolf.qiniudn.com/';

            var complete = function(res){

                $('#result').html('<img src='+result.domain+'/'+fileName+' />');

            }

             var subObject = {

//                next: next,

//                error: error,

                complete: complete

              };

            $.ajax({

                type: "get",

                url: "/api/uptoken",

                async: true,

                success: function(res) {

                    result = res;

                }

            });

            $('#select').on('change', function() {

                var file = this.files[0];

                    fileName = 'image/test/'+file.name;

                var token = result.uptoken;

                var domain = result.domain;

                var config = {

                    useCdnDomain: true,

                    disableStatisticsReport: false,

                    retryCount: 6,

                    region: qiniu.region.z0

                };

                var putExtra = {

                      fname: "",

                      params: {},

                      mimeType: null

                };

                var observable = qiniu.upload(file, fileName, token, putExtra, config);

                var subscription = observable.subscribe(subObject);

            });

            var marker = '';

            function clickButton(){

                $.ajax({

                    type: "get",

                    url: "/api/getImg",

                    async: true,

                    data:{

                        marker: marker

                    },

                    success: function(res) {

                        var items = res.items;

                        marker = res.marker;

                        var html = '';

                        items.forEach(function(val, index){

                            html += '<img src='+domain+val.key+' />'

                        });

                        $('#pics').html(html);

                    }

                });

            }

        </script>

    </body>

</html>
  • 上传之前必须要获取到token，所以先请求了一下接口。
  • 通过指定qiniu.upload第二个参数，并添加文件路径前缀，将图片路径区分开。
  • 获取图片列表，用的是qiniu提供的api。

5.启动服务

node server.js启动服务，然后访问index.html页面即可。

来源：https://segmentfault.com/a/1190000017064729

node+express上传图片到七牛的更多相关文章

  1. axios上传图片(及vue上传图片到七牛)）

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...

  2. koa-ueditor上传图片到七牛

    问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件.现在需要ueditor支持将图片直接上传到七牛云. 前提:百度的ueditor需要在本地配置 ...

  3. UEditor上传图片到七牛C#（后端实现）

    由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...

  4. 使用微信 SDK 上传图片到七牛

    总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 serverId 加上调用接口的 ApiTicket 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口 ...

  5. JAVA简单上传图片至七牛

    utils package com.example.demo.utils; import com.alibaba.fastjson.JSONObject; import com.qiniu.commo ...

  6. node+express上传图片

    注意: 别用multer 上传文件了,太坑了,普通文本获取不到,折腾了半天没有解决,最后采用 multiparty 解决了: <!DOCTYPE html><html> < ...

  7. vue项目中使用element ui上传图片到七牛

    1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...

  8. UEditor上传图片到七牛云储存（java）

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  9. UEditor上传图片到七牛云储存（c#）

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

随机推荐

  1. Linux学习之十九-Linux磁盘管理

    Linux磁盘管理 1.相关知识 磁盘,是计算机硬件中不可或缺的部分磁盘,是计算机的外部存储器中类似磁带的装置,将圆形的磁性盘片装在一个方的密封盒子里,这样做的目的是为了防止磁盘表面划伤,导致数据丢失 ...

  2. JAVA Eclipse如何安装Swing

    查看自己的Eclipse版本   打开WINDOWBUILDER的下载页面,找到自己对应版本的下载地址,注意只是一个下载地址,不是要下载东西 http://www.eclipse.org/window ...

  3. Vue 内容分发slot

    1.概述 内容分发:混合父组件的内容与子组件自己的模板. 2.单个插槽 当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在  ...

  4. HTML5 Support In Visual Studio 2010

    最近HTML5浪潮已经开始了,VS2010已经有一个扩展支持在HTML5智能提示.你可以从这里下载这个扩展: http://visualstudiogallery.msdn.microsoft.com ...

  5. oled屏幕

    oled作为一种新型的有机显示屏,越来越现实出其重要性,它不但超薄可弯折并且可视视角较宽.处在不论什么角度看屏幕都不会造成图像的失真. 且它有三中原色:绿.红,蓝. 我近期在学安在智能车上的oled ...

  6. 实用国际(XX)计量单位表

    很多实用附录简表:http://www.zdic.net/appendix/f1.htm 计量单位简表 时间的单位换算 : 1秒=1000毫秒(ms) 1毫秒=1/1,000秒(s)  1秒=1,00 ...

  7. UIView属性的动画

    //标记着动画块的开始,第一个参数表示动画的名字,起到标识作用 [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDurat ...

  8. HTML元素定位

    一切皆为框 div.h1 或 p 元素常常被称为块级元素(block element).这意味着这些元素显示为一块内容,即"块框".与之相反,span 和 strong 等元素称为 ...

  9. python学习（四）字符串学习

    #!/usr/bin/python # 这一节学习的是python中的字符串操作 # 字符串是在Python中作为序列存在的, 其他的序列有列表和元组 # 1. 序列的操作 S = 'Spam' # ...

  10. Echache整合Spring缓存实例解说

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要介绍了EhCache,并通过整合Spring给出了一个使用实例. 一.EhCac ...