思考:
原先只使用PHPSDK上傳,經(jīng)過近幾個月的運營反饋.發(fā)現(xiàn)經(jīng)常出現(xiàn)上傳不了圖片,前端無法拿到圖片url的情況。
思考了整個上傳的流程计维，PHPSDK在使用過程中，先保存文件到本地而后傳入云端撕予。從并發(fā)量來說,目前的流量也夠應付的來,但也不得不排除會有低概率的事故發(fā)生鲫惶。
隨后,我采用PHPSDK獲取token,調用JSSDK直傳七牛的方式進行前端上傳。
話不多說 貼上代碼:
說明:我使用的是layui文件上傳類实抡，包裹調用JSSDK
1.引用SDK文件qiniu.min.js
<script src='__TMPL__/public/jssdk/js/qiniu.min.js'></script>
2.前端上傳按鈕(配合上傳進度條)
<div>
<button type="button" class="layui-btn layui-btn-normal test" id="uploads">
<i class="layui-icon"></i>上傳評論截圖</button>
//進度條
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" style="margin:auto">
<div class="layui-progress-bar" lay-percent="0%"></div>
</div>
</div>
3.JS代碼
var index = 0;
var files = '';
layui.use(['upload', 'element'], function () {
var element = layui.element;
var upload = layui.upload;
var html = "";
var uploadInst = upload.render({
elem: '.test'
, url: '接口地址'
, multiple: false
, accept: 'images'
// , number: 3//限制上傳數(shù)量
, size: '5120'//限制5M大小
, before: function (obj) {
layer.msg('圖片上傳中...', {
icon: 16,
shade: 0.01,
time: 0
})
obj.preview(function (index, file, result) {
// console.log(file); //得到文件對象
files = file
});
}
, done: function (res, index) {
// console.log(res);
layer.close(layer.msg());//關閉上傳提示窗口
//如果上傳失敗
if (res.code == 0) {
return layer.msg('請求失敗');
}
var token = res.data.uptoken;
var domain = res.data.domain;
var file = files;
var result = {
loaded: '',
total: '',
percent: '',
imgUrl: 'cashApply/' + (new Date()).valueOf()
};
var count = $('#demo2').find('img').length;
console.log(count);
if (count > 0) {
return layer.msg('只能上傳一張圖片');
}
index++;
var observer = { //設置上傳過程的監(jiān)聽函數(shù)
next(result) { //上傳中(result參數(shù)帶有total字段的 object欠母，包含loaded欢策、total、percent三個屬性)
var num = Math.floor(result.total.percent); //查看進度[loaded:已上傳大小(字節(jié));total:本次上傳總大小;percent:當前上傳進度(0-100)]
var percent = num + '%'
element.progress('demo', percent); //配合 layui 進度條元素使用
$('#uploads').attr('class', 'layui-btn layui-btn-disabled');
$('.layui-upload-file').attr('disabled', true);
},
error(err) { //失敗后
layer.msg(err.message, {
time: 3000 //3秒關閉
}, function () {
$('#uploads').attr('class', 'layui-btn layui-btn-normal test');
$('.layui-upload-file').removeAttr('disabled');
});
},
complete(res1) { //成功后
//****:填寫你的綁定域名或七牛云提供的測試域名
//?imageView2/2/h/100：展示縮略圖赏淌，不加顯示原圖
layer.msg('圖片上傳成功', {
time: 1000 //3秒關閉
}, function () {
var url = domain + '/' + result.imgUrl
$("#demo2").attr("src", url);
$('#demo2').append(
'<div id="" class="file-iteme">' +
'<div class="handle" index=' + index + '><span class="glyphicon glyphicon-trash">刪除</span></div>' +
'<img src="' + url + '" width="180px" height="180px">' +
'</div>'
);
$("#demo3").append('<input type="hidden" index=' + index + ' xf-verify="required" name="image[]" value="' + url + '">');
});
}
};
var putExtra = {
fname: "", //原文件名
params: {}, //用來放置自定義變量
mimeType: ["image/png", "image/jpeg"] //限制上傳文件類型
};
var config = {
concurrentRequestLimit: 3 //分片上傳的并發(fā)請求量
};
var observable = qiniu.upload(file, result.imgUrl, token, putExtra, config);
observable.subscribe(observer) // 上傳開始
}
, error: function () {
//演示失敗狀態(tài)踩寇，并實現(xiàn)重傳
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
具體思路:
用layui文件上傳類訪問后臺接口拿取token,在suceess回調后調用SDK接口.
重點歸納
1.拿取文件對象上傳
, before: function (obj) {
obj.preview(function (index, file, result) {
// console.log(file); //得到文件對象
files = file
});
}
2.文件類型和大小的規(guī)則設置依托l(wèi)ayui文件上傳類限定
3.文件的命名在上傳過程的監(jiān)聽函數(shù)中設置
imgUrl: 'cashApply/' + (new Date()).valueOf()
4.SDK接口使用
var observable = qiniu.upload(file, result.imgUrl, token, putExtra, config);
observable.subscribe(observer) // 上傳開始
相關接口參數(shù)可參考七牛官方文檔.
但是也要說明下七牛JSSDK會有一些手機瀏覽器不適配的問題報BUG，建議需要用到JSSDK時六水，斟酌一下俺孙。
