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

最近做项目的时候有一个上传图片的需求，由于没有后端的配合，所以决定自己来搭个服务器，实现上传图片功能。以后如果需要修改成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. APNS push server端 SSL3.0 转 TLS （iPhone苹果推送服务）

    (转载此文,请说明原文出处) 苹果的官方公布 Update to the Apple Push Notification Service October 22, 2014 The Apple Push ...

  2. 关于阿里 weex 的使用与案例

    1. 阿里宣布开源Weex http://mp.weixin.qq.com/s?__biz=MzA4MjA0MTc4NQ==&mid=504089541&idx=1&sn=3a ...

  3. Python Random随机数

    Python产生随机数的功能在random模块中实现.实现了各种分布的伪随机数生成器 该模块能够生成0到1的浮点随机数,也能够在一个序列中进行随机选择.产生的随机数能够是均匀分布.高斯分布,对数正态分 ...

  4. 用PHP调用证件识别接口识别本地图片

    前置条件 在开始前,请作如下准备:1.学会用PHP输出“Hello World” 2.去聚合数据申请证件识别专用的KEY:https://www.juhe.cn/docs/api/id/153 操作步 ...

  5. [LeetCode] Decode Ways 解码方法个数、动态规划

    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...

  6. p90x 涵盖了全部方式的健身方式美国经典训练DVD

    http://baike.baidu.com/view/2602721.htm  p90x是美国经典训练DVD, 涵盖了全部方式的健身方式13张Beachbody P90X DVD全集,90天魔鬼训练 ...

  7. Redis主从同步分析

    一.Redis主从同步原理1.1 Redis主从同步的过程配置好slave服务器连接的master后,slave会建立和master的连接,然后发送sync命令.无论是第一次同步建立的连接还是连接断开 ...

  8. ORACLE经常使用系统查询

     1  查询系统全部对象 SELECT OWNER, OBJECT_NAME, OBJECT_TYPE, CREATED, LAST_DDL_TIME, TIMESTAMP, STATUS FRO ...

  9. Java系统中如何拆分同步和异步

    很多开发人员说,将应用程序切换到异步处理很复杂.因为他们有一个天然需要同步通信的Web应用程序.在这篇文章中,我想介绍一种方法来达到异步通信的目的:使用一些众所周知的库和工具来设计他们的系统. 下面的 ...

  10. java和C#实例化类初始化顺序

    c# 初始化顺序 子类的静态字段 子类的静态构造方法 子类的实例字段 父类的静态字段 父类的静态构造方法 父类的实例字段 父类的实例构造方法 java 初始化顺序 初始化过程: 1. 初始化父类中的静 ...