七牛雲圖檔存儲優點

支援各種尺寸的圖檔縮放；
支援圖檔自動壓縮；
支援水印添加：圖檔水印、文字水印兩種模式；
圖檔防盜鍊，限制通路來源；
設定ip黑白名單，防止惡意盜刷、攻擊；
自定義圖檔域名，看起來更具有歸屬性；
統計圖檔的各種通路資料；
支援上傳日志檔案，可儲存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

圖檔上傳

上傳步驟

簡單來說，圖檔上傳分為兩步：

根據AccessKey + SecretKey （可在個人中心=》秘鑰管理檢視） + bucket（存儲空間名稱），生成token；
使用圖檔源（檔案流/檔案位址）和token送出資訊到七牛存儲圖檔；

上傳途徑

上傳途徑分為兩種：

伺服器端上傳：分為本地檔案上傳、位元組數組上傳；
用戶端上傳：Base64模式上傳、Blob模式上傳；

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

伺服器端-nodejs上傳

在開始上傳之前，首先需要擷取一下七牛的token，也就是上傳步驟的第一步，這個token是通用的，不管是伺服器上傳還是用戶端上傳token值都是通用的，實作代碼也是一樣的。

擷取token

使用npm安裝七牛SDK：
npm install qiniu
使用下面代碼擷取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/[email protected]/dist/qiniu.min.js

<script type="text/javascript" src="https://unpkg.com/[email protected]/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;
}

注意點:

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

步驟三（2）：base64轉blob上傳

var putExtra = {
    fname: "",
    params: {},
    mimeType: [] || null
};
var config = {
    useCdnDomain: true
};

// base64 轉 blob 模式上傳
var base64 = 'xxx'.replace('data:image/png;base64,', '');
var contentType = 'image/png';
var blob = base64ToBlob(base64, contentType, undefined);
var observable = qiniu.upload(blob, 'xxx.png', qiniuToken, putExtra, config);
var subscription = observable.subscribe({
    next(res) {
        // console.log(res);
    },
    error(err) {
        console.log(err);
    },
    complete(res) {
        console.log(res);
    }
});

//base64轉blob
function base64ToBlob(base64, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(base64);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
}

參考文檔：

https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code

開啟你的使用之旅吧

注冊連結：

https://portal.qiniu.com/signup?code=3li1yhz9s7qky

如果本文對你有所幫助，請打賞——1元就足夠感動我：）

聯系郵箱：[email protected]

我的GitHub：

https://github.com/vipstone

關注公衆号：

作者：

王磊

出處：

http://vipstone.cnblogs.com/

本文版權歸作者和部落格園共有，歡迎轉載，請标明出處。

帶你玩轉七牛雲存儲——進階篇七牛雲圖檔存儲優點水印圖檔處理圖檔上傳開啟你的使用之旅吧

七牛雲圖檔存儲優點

水印

圖檔處理

圖檔上傳

上傳步驟

上傳途徑

伺服器端-nodejs上傳

用戶端-javascript上傳

開啟你的使用之旅吧

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條