帶你玩轉七牛雲存儲——高級篇

七牛雲圖片存儲優勢

1. 支持各類尺寸的圖片縮放；
2. 支持圖片自動壓縮；
3. 支持水印添加：圖片水印、文字水印兩種模式；
4. 圖片防盜鏈，限制訪問來源；
5. 設置ip黑白名單，防止惡意盜刷、攻擊；
6. 自定義圖片域名，看起來更具備歸屬性；
7. 統計圖片的各類訪問數據；
8. 支持上傳日誌文件，可保存30天，便於排除程序問題；

水印

靈活的水印配置：可設置位置、透明度等，同時支持圖片和文字兩種水印模式，如圖：

圖片處理

圖片處理裏面最好用的是生成各類縮略圖，超好用只須要加參數就好。

好比我須要獲得一張圖等比200*200的縮略圖，只須要在原有鏈接的基礎上加上「?imageView2/0/w/200/h/200」便可，所有路徑以下：http://icdn.apigo.cn/68.jpg?imageView2/0/w/200/h/200

更多詳細文檔：https://developer.qiniu.com/dora/manual/1279/basic-processing-images-imageview2

圖片上傳

上傳步驟

簡單來講，圖片上傳分爲兩步：

1. 根據AccessKey + SecretKey （可在我的中心=》祕鑰管理查看） + bucket（存儲空間名稱），生成token；
2. 使用圖片源（文件流/文件地址）和token提交信息到七牛存儲圖片；

上傳途徑

上傳途徑分爲兩種：

1. 服務器端上傳：分爲本地文件上傳、字節數組上傳；
2. 客戶端上傳：Base64直接上傳；

本文服務器端使用nodejs開發，客戶端使用javascript開發。

服務器端-nodejs上傳

在開始上傳以前，首先須要獲取一下七牛的token，也就是上傳步驟的第一步，這個token是通用的，無論是服務器上傳仍是客戶端上傳token值都是通用的，實現代碼也是同樣的。

獲取token

1. 使用npm安裝七牛SDK：

npm install qiniu

2. 使用下面代碼獲取uploadToken：

var accessKey = 'xxx'; //可在我的中心=》祕鑰管理查看
var secretKey = 'xxx'; //可在我的中心=》祕鑰管理查看
var bucket = "apigo";  //存儲空間名稱
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
  scope: bucket
}
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
return this.jsonp({ 'token': uploadToken });
複製代碼

注意：下面全部的實現方面裏的uploadToken都是從本方法獲取的。

方式一：本地文件上傳

代碼以下：

var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z1; // 空間對應的機房
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();

var key='test.png';  //上傳到服務器的名稱
var localFile = "D:\\img\\test.png"; // 本地文件路徑
formUploader.putFile(uploadToken, key, localFile, putExtra, function (respErr,
  respBody, respInfo) {
  if (respErr) {
    throw respErr;
  }
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else {
    console.log(respInfo.statusCode);
    console.log(respBody);
  }
});
複製代碼

其中，機房對應的對象以下：

• 華東 qiniu.zone.Zone_z0
• 華北 qiniu.zone.Zone_z1
• 華南 qiniu.zone.Zone_z2
• 北美 qiniu.zone.Zone_na0

方式二：字節數組上傳

完整實現思路：前臺頁面input[type=file]Post請求到後臺，後臺轉換讀取文件流對象傳遞給七牛雲，使用putStream保存文件。

前臺代碼

<form action="http://127.0.0.1:8360/qiniu/upload" method="POST" enctype="multipart/form-data">
    <input name="f" type="file" />
    <button type="submit">提交</button>
</form>
複製代碼

nodejs服務器端代碼

var _file = this.file("f"); //前臺type=file post過來的文件
var putExtra = new qiniu.form_up.PutExtra();
var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z1; // 空間對應的機房
var formUploader = new qiniu.form_up.FormUploader(config);
var key = "test1.png";
var readStream = fs.createReadStream(_file.path); //文件流對象
formUploader.putStream(uploadToken, key, readStream, putExtra, function (respErr,
  respBody, respInfo) {
  if (respErr) {
    throw respErr;
  }
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else {
    console.log(respInfo.statusCode);
    console.log(respBody);
  }
});
複製代碼

方式三：Base64轉字節數組上傳 先後臺使用Base64進行數據傳遞也是比較經常使用的方式之一，尤爲是不一樣平臺的傳值，好比手機、平板Post數據給PC，相似方式二的實現方式，咱們只是把前臺傳遞給咱們的Base64轉換成文件流對象，使用putStream進行上傳，具體nodejs代碼以下：

import { Duplex } from 'stream';

var b64string = 'xxx';   //base64必須去掉頭文件（data:image/png;base64,）
var buff = new Buffer(b64string, 'base64')
var stream = new Duplex();
stream.push(buff);
stream.push(null);

var putExtra = new qiniu.form_up.PutExtra();
var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z1; // 空間對應的機房
var formUploader = new qiniu.form_up.FormUploader(config);
var key = "test.png";
formUploader.putStream(uploadToken, key, stream, putExtra, function (respErr,
  respBody, respInfo) {
  if (respErr) {
    throw respErr;
  }
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else {
    console.log(respInfo.statusCode);
    console.log(respBody);
  }
});
複製代碼

須要注意的一點是base64字符串必須去掉頭文件（data:image/png;base64,）才能進行字節流的轉換。

客戶端-javascript上傳

步驟一：引用qiniu.min.js 先引入qiniu.min.js文件，格式：https://unpkg.com/qiniu-js@/dist/qiniu.min.js

其中爲版本號，查看發佈的版本版：https://github.com/qiniu/js-sdk/releases ，示例：https://unpkg.com/qiniu-js@2.3.0/dist/qiniu.min.js

<script type="text/javascript" src="https://unpkg.com/qiniu-js@2.3.0/dist/qiniu.min.js"></script>
複製代碼

步驟二：獲取uploadToken 參考上文獲取uploadToken通用方法。

步驟三：base64模式直接上傳

//base64模式直接上傳
var base64 = 'xxx'.replace('data:image/png;base64,', '');
var imgName = toBase64('xxx.png'); //自定義文件名必須是base64格式的
var url = "http://upload.qiniup.com/putb64/-1/key/" + imgName; //非華東空間須要根據注意事項-修改上傳域名(upload.qiniup.com)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        //上傳成功，返回信息
        console.log(xhr.responseText);
    }
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken " + uploadToken);
xhr.send(base64);


function toBase64(data) {
	var toBase64Table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
	var base64Pad = '=';
    var result = '';
    var length = data.length;
    var i;
    // Convert every three bytes to 4 ascii characters.                                                   

    for (i = 0; i < (length - 2); i += 3) {
        result += toBase64Table[data.charCodeAt(i) >> 2];
        result += toBase64Table[((data.charCodeAt(i) & 0x03) << 4) + (data.charCodeAt(i + 1) >> 4)];
        result += toBase64Table[((data.charCodeAt(i + 1) & 0x0f) << 2) + (data.charCodeAt(i + 2) >> 6)];
        result += toBase64Table[data.charCodeAt(i + 2) & 0x3f];
    }

    // Convert the remaining 1 or 2 bytes, pad out to 4 characters.     
    if (length % 3) {
        i = length - (length % 3);
        result += toBase64Table[data.charCodeAt(i) >> 2];
        if ((length % 3) == 2) {
            result += toBase64Table[((data.charCodeAt(i) & 0x03) << 4) + (data.charCodeAt(i + 1) >> 4)];
            result += toBase64Table[(data.charCodeAt(i + 1) & 0x0f) << 2];
            result += base64Pad;
        } else {
            result += toBase64Table[(data.charCodeAt(i) & 0x03) << 4];
            result += base64Pad + base64Pad;
        }
    }
    return result;
}
複製代碼

注意點:

1. url參數注意空間存儲區域，不一樣地域url地址不一樣，華東upload.qiniup.com，華北upload-z1.qiniu.com，華南upload-z2.qiniu.com，北美upload-na0.qiniu.com；
2. 文件名（imgName）必須是base64格式的；
3. 請求頭Authorization的值格式："UpToken " + uploadToken（服務器端獲取uploadToken，見上文）；

更多開發語言：developer.qiniu.com/sdk#officia…

參考文檔： developer.qiniu.com/kodo/kb/132…

開啓你的使用之旅吧

註冊連接：portal.qiniu.com/signup?code…