七牛云
七牛云
一、為啥會選擇七牛？
為什么越來越多的公司用七牛來作為存儲數(shù)據(jù)的容器？
官方解說：
- 提供圖片裁剪、縮放、格式轉(zhuǎn)化、水印、原圖保護(hù)和防盜鏈，以及音視頻轉(zhuǎn)碼、切片和拼接等基礎(chǔ)的數(shù)據(jù)處理服務(wù)
- 允許用戶構(gòu)建、上傳自定義的私有數(shù)據(jù)處理服務(wù)，支持管道處理、持久化、預(yù)處理操作等所有特性。
- 作為一個開放的應(yīng)用平臺，歡迎各種圖片、音視頻、以及其他數(shù)據(jù)處理的第三方應(yīng)用提供方接入，為七牛存儲中的海量數(shù)據(jù)，提供增值的數(shù)據(jù)處理服務(wù)。
我說：
反正好使就行
沒關(guān)系，笑一笑就好了 - - ！
二、正式步入正題
需求：上傳六張圖片到七牛云，吧啦吧啦吧啦.....
七牛云提供的官方SDK
官方SDK
本次主要介紹JavaScript（好像目前也只會這一個，哈哈 - - ?。?，大家可以先去瀏覽一遍官方文檔 七牛云 大概了解一下。
三、開始吧啦吧啦吧啦
-
1.我們需要寫一個點擊的對象以及展示的容器，類似，這個：
上傳必須品ing
- 需要引入的文件
<script src="{{ asset('js/qiniu.js') }}"></script>
<script src="{{ asset('js/moxie.js') }}"></script>
<script src="{{ asset('js/plupload.dev.js') }}"></script>
- 3.上傳代碼：
var photo_path_arr = []; // 創(chuàng)建存圖片數(shù)組
var qiniuUploader_p='';
qiniuUploader_p = Qiniu.uploader({
runtimes: 'html5,flash,html4', // 上傳模式,依次退化
browse_button:'addphotoes', // 上傳選擇的點選按鈕，**必需**
max_file_size: '1024mb', // 最大文件體積限制
flash_swf_url: '{{ asset('js/Moxie.swf') }}', // 引入flash,相對路徑
dragdrop: true, // 開啟可拖曳上傳
chunk_size: '4mb', // 分塊上傳時，每塊的體積
unique_names: false, // 默認(rèn)false，key為文件名。若開啟該選項，JS-SDK會為每個文件自動生成key（文件名）
max_retries: 3, // 上傳失敗最大重試次數(shù)
// 文件類型過濾，這里限制為圖片類型
filters : {
max_file_size : '1024mb',
prevent_duplicates: true,
mime_types: [
{title : "Image files", extensions : "png,jpg,jpeg"}
]
},
multi_selection: true, // 是否允許同時選擇多文件
get_new_uptoken: false, // 設(shè)置上傳文件的時候是否每次都重新獲取新的token
// 從后臺獲取token值
uptoken_func: function (file) {
$.ajax({
type: 'GET',
url:"",
async: false,
success:function(result){
result = eval("("+result+")");
token = result;
return token;
},
error: function(result){
console.log(result)
}
})
return token;
},
domain: '', // 七牛云存儲空間域名
auto_start: true, // 自動上傳
log_level: 5,
init: {
'FilesAdded': function (up, files) {
plupload.each(files, function (file) {
// 文件添加進(jìn)隊列后，處理相關(guān)的事情
});
},
'BeforeUpload': function (up, file) {
// 每個文件上傳前，處理相關(guān)的事情
},
'UploadProgress': function (up, file) {
// 每個文件上傳時，處理相關(guān)的事情
},
'UploadComplete': function () {
// 隊列文件處理完畢后，處理相關(guān)的事情
},
'FileUploaded': function (up, file, info) {
// 每個文件上傳完畢后，處理相關(guān)的事情
var html;
let src = JSON.parse(info).key; // 七牛云返回的key
photo_path_arr.push(src);
// 限制用戶只能上傳6張圖片
if($(".nowimgmodel").length < 6) {
for(var i = 0; i < photo_path_arr.length; i++) {
var smallsrc = photo_path_arr[i] + '?imageView2/2/w/800'; // 避免圖片太大頁面加載慢
html = `<div class="nowimgmodel col-sm-4">
<div class="nowimg">
<img data-url='' class="delphoto" onclick="delectPhoto(this)" src="{{ asset('img/PC/delect.png') }}" alt="">
<img class="photoinfo" src='${smallsrc}' alt="">
</div>
<div class="small_shadow"></div>
</div>`;
}
} else {
swal({title: '最多上傳6張圖片', timer: 5000, type: 'error'});
return false;
}
$("#addmodeles").append(html);
qiniuUploader_p.removeFile(file);
}，
'Error': function (up, err, errTip) {
// 返回錯誤信息
swal({title: err, timer: 5000, type: 'error'});
},
'Key': function (up, file) {
// 若想在前端對每個文件的key進(jìn)行個性化處理，可以配置該函數(shù)
// 該配置必須要在 unique_names: false , save_key: false 時才生效
var name =file.name;
var key =new Date().getFullYear()+""+(new Date().getMonth() + 1)+""+new Date().getDate() +""+new Date().getHours() +""+new Date().getMinutes() +""+(Math.floor(Math.random () * 900) + 100)+name.substr(name.lastIndexOf(".")); // 添加時間戳+隨機數(shù)，避免文件名重復(fù)
// do something with key
return key;
}
}
})
-
4.上傳完畢示例圖
上傳結(jié)束示例圖.png
圖片（限制張數(shù)）上傳到七牛云簡單介紹完畢，還是要根據(jù)各個小伙伴公司產(chǎn)品需求來寫啦，其中一些細(xì)節(jié)的點大家可以去七牛云官網(wǎng)上了解一下，以及對于圖片的處理，也闊以去官方多學(xué)習(xí)幾個方法，之后也會不定期更新用七牛云上傳圖片，音頻，視頻，等等等...，小伙伴有什么更好的提議闊以在下面留言，蟹蟹~~
程序猿小伙伴們注意保暖哈
