七牛雲圖片儲存優點
- 支援各種尺寸的圖片縮放;
- 支援圖片自動壓縮;
- 支援水印新增:圖片水印、文字水印兩種模式;
- 圖片防盜鏈,限制訪問來源;
- 設定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直接上傳;
本文伺服器端使用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/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;
}
複製程式碼
注意點:
- url引數注意空間儲存區域,不同地域url地址不同,華東upload.qiniup.com,華北upload-z1.qiniu.com,華南upload-z2.qiniu.com,北美upload-na0.qiniu.com;
- 檔名(imgName)必須是base64格式的;
- 請求頭Authorization的值格式:"UpToken " + uploadToken(伺服器端獲取uploadToken,見上文);
更多開發語言:developer.qiniu.com/sdk#officia…
參考文件: developer.qiniu.com/kodo/kb/132…