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

最近做项目的时候有一个上传图片的需求，由于没有后端的配合，所以决定自己来搭个服务器，实现上传图片功能。以后如果需要修改成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. python的依赖性安全性检查

    1.safety 安装: pip install safety 使用: 检查整个系统的依赖包安全性safety check检查某个项目的依赖性安全safety check -r requirement ...

  2. Discussion about z pre-pass

    Z pre-pass In the rendering Process, the first pass render to a depth buffer to get the front layer ...

  3. 出自 HTML4 规范的可用颜色字符串值列表（常用颜色名称及对应的十六进制值）

    据称由于 HTML5 没有修改专属的颜色,HTML4 的颜色都可以在 HTML5 中正确显示. 出自 HTML4 规范的可用颜色字符串值列表如下,此表来源是 http://www.lovean.com ...

  4. 移动端弹窗 layer.js 使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. SqlServer 垂直分表

    当单表数据太多时.我们能够水平划分,參考 SqlServer 分区视图实现水平分表 ,水平划分能够提高表的一些性能. 而 垂直分表 则相对非常少见到和用到,由于这可能是数据库设计上的问题了.假设数据库 ...

  6. P13在O(1)时间内删除链表结点

    package offer; //在 O(1)时间删除链表结点 public class Problem13 { public static void main(String[] args) { Li ...

  7. HDU 5056 Boring count（数学）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5056 Problem Description You are given a string S con ...

  8. oauth学习

    https://www.cnblogs.com/blowing00/p/4524132.html

  9. 有一个投篮游戏。球场有p个篮筐，编号为0，1...，p-1。每个篮筐下有个袋子，每个袋子最多装一个篮球。有n个篮球，每个球编号xi 。规则是将数字为xi 的篮球投到xi 除p的余数为编号的袋里。若袋里已有篮球则球弹出游戏结束输出i，否则重复至所有球都投完。输出-1。问游戏最终的输出是什么？

    // ConsoleApplication5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<vector> ...

  10. 11 linux nginx上安装ecshop 案例

    一: nginx上安装ecshop 案例 (1)解压到 nginx/html下 浏览器访问:127.0.0.1/ecshop/index.php 出现错误:not funod file 原因:ngin ...