node+express上傳圖片到七牛

時間 2019-11-10

標籤 node+express node express 上傳圖片七牛 7牛简体版

原文原文鏈接

本人微信公衆號： 前端修煉之路，歡迎關注

最近作項目的時候有一個上傳圖片的需求，因爲沒有後端的配合，因此決定本身來搭個服務器，實現上傳圖片功能。之後若是須要修改爲java或者php爲後端，直接使用便可，而不用等到後端聯調的時候再去動手。javascript

這裏使用的技術爲node.js + qiniu nodeJS SDK+ qiniu JS SDK + express + html5。php

1. 安裝express 和 qiniu

首先須要安裝node.js，而後新建一個目錄在目錄下面依次執行下面的命令css

cnpm init 
cnpm install express --save
cnpm install qiniu --save

說明：html

使用了cnpm替換npm命令，這是由於前者會比後者更快一些。
第一條命令會在目錄下建立一個package.json文件，而後在命令行中一路回車就好。
在命令後面添加--save能夠在package.json文件的dependencies屬性中，將express和qiniu添加上。這樣之後換一個目錄，在沒有node_modules目錄時，直接使用npm install就能夠安裝了。

2.配置七牛 AccessKey/SecretKey

首先確定是要註冊一個七牛帳號的。能夠點個人分享連接直接註冊：https://portal.qiniu.com/sign...前端

建立一個七牛存儲空間，這裏假設空間名字爲qiniu_test。html5

在我的中心中，找到密鑰管理，建立一個密鑰。以後就會生成一個accessKey和secretKey。java

回到項目目錄下，建立一個config.json，將下面的內容粘貼進去node

{
    "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這樣域名。之後訪問文件的時候，就能夠經過這個域名來訪問的。jquery

3.配置服務

在項目目錄中建立一個server.js，將下面的內容拷貝其中。而後我逐一解釋下。ajax

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頁面便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。