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

最近做项目的时候有一个上传图片的需求，由于没有后端的配合，所以决定自己来搭个服务器，实现上传图片功能。以后如果需要修改成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. VS2010中 报错：error C2146、error C4430 原因一：缺少CvvImage类

    今天用vs2010打开vs2008的一个工程,报了好多错: 1>e:\visual studio 2010\projects\imageprojects\morphology\morpholog ...

  2. C#里判断字符串是否为纯数字

    c bool IsNumeric(string str) //接收一个string类型的参数,保存到str里 { if (str == null || str.Length == 0) //验证这个参 ...

  3. unity游戏开发

    第1章 基础知识 11.1 Unity简介 11.2 跨平台与多工种协作 11.3 Unity版本 21.4 Unity内置资源或拓展资源 31.5 示例项目打包与发布 51.6 Unity服务 71 ...

  4. 服务器性能之CPU

    有时我们会发现开发的应用在CPU核数一样的虚拟服务器上性能表现出较大的差异,这是为什么呢?上次有童鞋问到我这样一个问题,所以我根据自己的理解给大家简说下! CPU生产商为了提高CPU的性能,通常做法是 ...

  5. vue2.X slot 分发内容

    1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...

  6. Webpack DLL

    参考自:https://www.jianshu.com/p/a5b3c2284bb6 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,我们希望能和自己的 ...

  7. vue install 注册组件

    1.myPlugin.js文件 let MyPlugin = {}; MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue. ...

  8. UNP学习笔记（第十七章 ioctl操作）

    ioctl相当于一个杂物箱,它一直作为那些不适合归入其他精细定义类别的特性的系统接口. 本章笔记先放着,到时候有需要再看 ioctl函数 #include <unistd.h> int i ...

  9. js 小总结

    数组操作 创建数组:var standTerm = new Array("维护","维修"); var arr = new Array(); 数组长度:leng ...

  10. iOS - 贝塞尔曲线,折线,曲线,波浪线

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHlsYW5fbHdiXw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...