前端js调用七牛制作评价页面案例
一、需求
公司所有的上传页面都用七牛，前端不免要直接调用七牛的代码进行上传，以下是一个实现七牛上传的案例，制作一个常见的商品评价页面，页面需求很常见当上传到第五章图片的时候，上传按钮消失，上传需要显示当前进度，上传完毕以后可以删除图片，如图1所示。
二、过程
七牛官网的比较多比较乱，直接给大家一个配置好可以用的，如需其他定制，只能自己去啃文档了，整个demo的js核心代码如下
var progress1;
var waikuang;
var img;
var span;
var flag = 0; // 判定当前是第几张图片
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', // 上传模式,依次退化
browse_button: 'pickfiles', // 上传选择的点选按钮，**必需**
domain: '公司的七牛域名',
get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的 uptoken
container: 'container', // 上传区域 DOM ID，默认是 browser_button 的父元素，
max_file_size: '2mb', // 最大文件体积限制
flash_swf_url: 'path/of/plupload/Moxie.swf', //引入 flash,相对路径
max_retries: 3, // 上传失败最大重试次数
dragdrop: true, // 开启可拖曳上传
drop_element: 'container', // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
chunk_size: '4mb', // 分块上传时，每块的体积
auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
multi_selection: !(mOxie.Env.OS.toLowerCase() === "ios"),
uptoken_func: function (file) {
console.log(file)
var ajax = new XMLHttpRequest();
ajax.open('POST', 公司后台提供的七牛接口, false);
ajax.send();//
if (ajax.status === 200) {
var res = JSON.parse(ajax.responseText);
console.log('custom uptoken_func:' + res.uptoken);
return res.uptoken;
} else {
console.log('custom uptoken_func err');
return '';
}
},
auto_start: true,
// log_level : 5,//打印日至
init: {
'FilesAdded': function (up, files) {
plupload.each(files, function (file) {
// 文件添加进队列后,处理相关的事情
waikuang = document.createElement("a");
waikuang.className = "showPic";
waikuang.id=file.name+"hmsg"
img= document.createElement("img");
span = document.createElement("span");
span.className = "closePic";
waikuang.appendChild(img);
img.style.zIndex=10;
waikuang.appendChild(span);
progress1 = document.createElement("progress");
progress1.max = 100;
waikuang.appendChild(progress1);
document.getElementById("container").appendChild(waikuang);
});
},
'BeforeUpload': function (up, file) {
// 每个文件上传前,处理相关的事情
},
'UploadProgress': function (up, file) {
// 每个文件上传时,处理相关的事情
progress1.value = file.percent;
console.log(file.percent)
},
'FileUploaded': function (up, file, info) {
// 每个文件上传成功后,处理相关的事情
var res = JSON.parse(info);
var sourceLink = "http://7xs8w3.com1.z0.glb.clouddn.com/" + res.key; //获取上传成功后的文件的Url
img.src = sourceLink;
span.id = res.key;
waikuang.removeChild(progress1);
window.sessionStorage.setItem(res.key,sourceLink);
flag++;
//监听删除
var x = document.getElementById(span.id);
x.onclick= function () {
document.getElementById("container").removeChild(document.getElementById(res.key+"hmsg"));
window.sessionStorage.removeItem(res.key);
flag--;
if(flag<5){
document.getElementById("pickfiles").style.display="inline-block";
}
}
},
'Error': function (up, err, errTip) {
alert("上传出错，请稍后再尝试")
},
'UploadComplete': function () {
//队列文件处理完毕后,处理相关的事情
if(flag>=5){
document.getElementById("pickfiles").style.display="none";
}
},
'Key': function (up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在 unique_names: false , save_key: false 时才生效
var key = file.name;
// 刷新token;
return key
}
}
});
关键处已经有注释，前端需要做的是将公司独有的接口和七牛域名进行配置，在七牛上传插件初始化的时候有大概七个回调，分别代表着图片上传前后和图片上传中要处理的代码，我这个案例在图片上传以前要简历一个承载图片的div和一个关闭按钮，图片上传的时候要改变进度，图片上传以后判断当前图片数目如果够五张了，则隐藏上传框，删除图片以后如果不足五张则显示上传框，上传进度条要符合项目的主题色，所以要更改一下process标签的默认样式，这里以webkit内核给出模板，代码如下
html部分代码
css更改默认样式代码
/*默认情况下的颜色*/
progress::-webkit-progress-bar {
background: #fff;
}
/*进度滚动条的颜色*/
progress::-webkit-progress-value {
background: #fd6897;
}
三、难点和坑
七牛发ajax获取token的时候采用cors跨域方法，需要后端的配合否则会报ajax跨域失败的错误，事例代码是没错的，若报这个错，各位前端同胞直接找后台即可。