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

最近做项目的时候有一个上传图片的需求，由于没有后端的配合，所以决定自己来搭个服务器，实现上传图片功能。以后如果需要修改成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. 漫谈程序员系列：3D打印能打印出程序员吗

    首先声明,本文是一本正经的胡扯,绝不是随随便便的胡扯,请您不要随便攻击我胡说八道.我要反复星爷在<喜剧之王>里的台词:事实上.我是一本正经的喷子. 3D打印的定义 关于3D打印,以下是来自 ...

  2. JAVA_Error initializing endpoint怎么办

    1 运行CMD,输入命令netstat –ano,找到这个TCP,后缀为8080的PID(我的是2660),然后打开任务管理器,在进程选项卡中打开PID查看   2 在右侧的进程窗口找到PID是左侧的 ...

  3. OCP-1Z0-051-题目解析-第16题

    16. Evaluate the following query: SQL> SELECT promo_name q'{'s start date was }' promo_begin_date ...

  4. 从有序数组中查找某个值 low_bound

    二分搜索 题意: 给定长度为n的单调不下降数列a0, ...an-1和一个数k,求满足ai>=k条件的最小的i. 不存在的情况下输出n. 输入: 5        3 2 3 3 5 6 输出: ...

  5. JavaScript 文件操作方法详解

    可以通过浏览器在访问者的硬盘上创建文件,因为我开始试了一下真的可以,不信你把下面这段代码COPY到一个HTML文件当中再运行一下! <script language="JavaScri ...

  6. python解释器分类

    当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件. 由于整个Python语言从规范到解释器都是开源的 ...

  7. Spring IOC源码分析之-刷新前的准备工作

    目录 ClassPathXmlApplicationContext的注册方式 加载父子容器 配置路径解析 容器刷新 刷新容器之刷新预处理 ClassPathXmlApplicationContext的 ...

  8. jdbc 模板 连接

    package itcast; import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;i ...

  9. js中比較好的继承方式

    前面说到了原型和原型链,今天就来说说在面向对象中比較好的继承方式吧.先来看看两种基础的继承方式: 一.构造函数型 function People(name) { this.name=name; } P ...

  10. IPv4地址（二）网络划分

    在IPv4地址(一)中提到过,IP地址可以分成两部分,前面一部分是网络号,而后面一部分是主机号. 这里网络可以通过主机数量规模不同而分为3类:大型网络.中型网络和小型网络. 不同网络的特点 大型网络— ...