七牛云圖片存儲優(yōu)點

支持各種尺寸的圖片縮放；

支持圖片自動壓縮；

支持水印添加：圖片水印、文字水印兩種模式；

圖片防盜鏈，限制訪問來源；

設(shè)置ip黑白名單，防止惡意盜刷、攻擊；

自定義圖片域名，看起來更具有歸屬性；

統(tǒng)計圖片的各種訪問數(shù)據(jù)；

支持上傳日志文件，可保存30天，便于排除程序問題；

水印

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

圖片處理

圖片處理里面最好用的是生成各種縮略圖，超好用只需要加參數(shù)就好。

比如我需要得到一張圖等比200*200的縮略圖，只需要在原有連接的基礎(chǔ)上加上“?imageView2/0/w/200/h/200”即可，全部路徑如下：http://icdn.apigo.cn/68.jpg?imageView2/0/w/200/h/200

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

圖片上傳

上傳步驟

簡單來說，圖片上傳分為兩步：
1. 根據(jù)AccessKey + SecretKey （可在個人中心=》秘鑰管理查看） + bucket（存儲空間名稱），生成token；
2. 使用圖片源（文件流/文件地址）和token提交信息到七牛存儲圖片；

上傳途徑

上傳途徑分為兩種：
1. 服務(wù)器端上傳：分為本地文件上傳、字節(jié)數(shù)組上傳；
2. 客戶端上傳：Base64直接上傳；

本文服務(wù)器端使用nodejs開發(fā)，客戶端使用javascript開發(fā)。

服務(wù)器端-nodejs上傳

在開始上傳之前，首先需要獲取一下七牛的token，也就是上傳步驟的第一步，這個token是通用的，不管是服務(wù)器上傳還是客戶端上傳token值都是通用的，實現(xiàn)代碼也是一樣的。

獲取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 });

注意：下面所有的實現(xiàn)方面里的uploadToken都是從本方法獲取的。

方式一：本地文件上傳

代碼如下：

var config = new qiniu.conf.Config(); config.zone = qiniu.zone.Zone_z1; // 空間對應(yīng)的機房 var formUploader = new qiniu.form_up.FormUploader(config); var putExtra = new qiniu.form_up.PutExtra();var key='test.png'; //上傳到服務(wù)器的名稱 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);} });

其中，機房對應(yīng)的對象如下：
- 華東 qiniu.zone.Zone_z0
- 華北 qiniu.zone.Zone_z1
- 華南 qiniu.zone.Zone_z2
- 北美 qiniu.zone.Zone_na0

方式二：字節(jié)數(shù)組上傳

完整實現(xiàn)思路：前臺頁面input[type=file]Post請求到后臺，后臺轉(zhuǎn)換讀取文件流對象傳遞給七牛云，使用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服務(wù)器端代碼

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; // 空間對應(yīng)的機房 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轉(zhuǎn)字節(jié)數(shù)組上傳
前后臺使用Base64進(jìn)行數(shù)據(jù)傳遞也是比較常用的方式之一，尤其是不同平臺的傳值，比如手機、平板Post數(shù)據(jù)給PC，類似方式二的實現(xiàn)方式，我們只是把前臺傳遞給我們的Base64轉(zhuǎn)換成文件流對象，使用putStream進(jìn)行上傳，具體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; // 空間對應(yīng)的機房 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,）才能進(jìn)行字節(jié)流的轉(zhuǎn)換。

客戶端-javascript上傳

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

其中為版本號，查看發(fā)布的版本版：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; //非華東空間需要根據(jù)注意事項-修改上傳域名(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參數(shù)注意空間存儲區(qū)域，不同地域url地址不同，華東upload.qiniup.com，華北upload-z1.qiniu.com，華南upload-z2.qiniu.com，北美upload-na0.qiniu.com；
2. 文件名（imgName）必須是base64格式的；
3. 請求頭Authorization的值格式：”UpToken ” + uploadToken（服務(wù)器端獲取uploadToken，見上文）；

更多開發(fā)語言：https://developer.qiniu.com/sdk#official-sdk

參考文檔：
https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code

開啟你的使用之旅吧

注冊鏈接：https://portal.qiniu.com/signup?code=3li1yhz9s7qky

總結(jié)

以上是生活随笔為你收集整理的带你玩转七牛云存储——高级篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。