思考:
原先只使用PHPSDK上传,经过近几个月的运营反馈.发现经常出现上传不了图片,前端无法拿到图片url的情况。
思考了整个上传的流程，PHPSDK在使用过程中，先保存文件到本地而后传入云端。从并发量来说,目前的流量也够应付的来,但也不得不排除会有低概率的事故发生。
随后,我采用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//限制上传数量
, 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 = { //设置上传过程的监听函数
next(result) { //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
var num = Math.floor(result.total.percent); //查看进度[loaded:已上传大小(字节);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 //分片上传的并发请求量
};
var observable = qiniu.upload(file, result.imgUrl, token, putExtra, config);
observable.subscribe(observer) // 上传开始
}
, error: function () {
//演示失败状态，并实现重传
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.文件类型和大小的规则设置依托layui文件上传类限定
3.文件的命名在上传过程的监听函数中设置
imgUrl: 'cashApply/' + (new Date()).valueOf()
4.SDK接口使用
var observable = qiniu.upload(file, result.imgUrl, token, putExtra, config);
observable.subscribe(observer) // 上传开始
相关接口参数可参考七牛官方文档.
但是也要说明下七牛JSSDK会有一些手机浏览器不适配的问题报BUG，建议需要用到JSSDK时，斟酌一下。
