下载demo看了一下，发现根本看不懂！！
然后就去找同事寻求帮助，从第一个按钮开始慢慢研究。
有用的按钮就两个，一个是选择文件，一个数开始上传，一张图的上传还比较简单，写个接口从后台读取OSSAccessKeyId、signature这些参数再上传就好了，问题是有多个按钮怎么弄！从选择文件开始，选择文件的按钮在plupload.Uploader是可以传数组的！！，想了好久，还是得靠百度解决问题。。
第一个按钮搞定了。开始第二个。
第二个就没这么容易搞定了
从最简单的开始，看到了有PostInit里面有个方法叫document.getElementById('postfiles').onclick = function () {
set_upload_param(uploader, '', false);
return false;
}
id就是开始上传的按钮，console.log一下，果然是这个，然后又开始研究set_upload_param函数。
上传一张图的时候直接请求接口拿到参数给个名字上传就完事了，多张图的时候每次请求拿到的回调都是同一个函数..
开始怀疑是不是接口写的有问题了。又卡了一个小时，不断的console.log()，终于看到文件名字是JS生成的！
接口只返回文件夹名字。。
代码很简单，排查起来感觉特别复杂，特别是对于我这种2年没写过js代码的人来说简直要了老命了！
关于怎么给多个缩略图赋值的问题：
设置一个全局变量type，在每个开始上传的函数里面赋值type=ID名字
然后上传成功的时候$("#"+type).attr('src',路径)就好了
上传的函数里面还有个BeforeUpload,也卡了我好久，每次都会调用两次上传函数，一直想不明白，以为是前面的代码影响的，不断的console.log才打印出来问题，把BeforeUpload注释掉就能正常上传了
下面是80%的js代码，以此记录一下
//设置上传参数
function set_upload_param(up, filename, ret,num) {
var url = "{:url('/owner/index/ossAli')}";
$.get(url, function (data) {
if(data.code==1){
var data = data.data;
g_dirname = data.dir;
//第一次上传文件名字为空，第二次重新赋值
if(g_object_name==""){
if(up.files.length===0){
layer.msg("请选择上传的文件");
return false;
}
filename = filename==''?up.files[0].name:filename;
g_object_name =data.dir+random_string(11)+get_suffix(filename);
}else{
filename = filename==''?up.files[0].name:filename;
g_object_name =data.dir+random_string(12)+get_suffix(filename);
}
var new_multipart_params = {
'key': g_object_name,
'policy': data.policy,
'OSSAccessKeyId': data.accessid,
'success_action_status': '200', //让服务端返回200,不然，默认会返回204
'signature': data.signature,
};
up.setOption({
'url': data.host,
'multipart_params': new_multipart_params
});
up.start();
}
});
}
function calculate_object_name(filename)
{
suffix = get_suffix(filename)
g_object_name =g_dirname + random_string(10) + suffix
}
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: ['selectfiles1','selectfiles2','selectfiles3','selectfiles4'],
multi_selection: true,
container: document.getElementById('container'),
flash_swf_url: '/oss/lib/plupload-2.1.2/js/Moxie.swf',
silverlight_xap_url: '/oss/lib/plupload-2.1.2/js/Moxie.xap',
url: 'http://oss.aliyuncs.com',
filters: {prevent_duplicates: true},
init: {
//上传图片初始化
PostInit: function () {
document.getElementById('ossfile').innerHTML = '';
//头像
document.getElementById('head').onclick = function () {
type = 'image-head';
console.log(uploader,'yuantianfu')
set_upload_param(uploader, '', false,10);
console.log(type)
return false;
};
//正面
document.getElementById('front').onclick = function () {
type = 'image-front';
set_upload_param(uploader, '', false,9);
return false;
};
//反面
document.getElementById('back').onclick = function () {
type = 'image-back';
set_upload_param(uploader, '', false,8);
return false;
};
//手持
document.getElementById('touch').onclick = function () {
type = 'image-touch';
set_upload_param(uploader, '', false,7);
return false;
};
},
// 选择文件触发按钮
FilesAdded: function (up, files) {
// uploader.start();
plupload.each(files, function (file) {
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' +
' <lable class="layui-col-md2 ssy-lalble text-right"> ' + file.name + ' (' +
plupload.formatSize(file.size) + ')：</lable><div class="layui-col-md6 mt10" style="display:flex;flex-direction:row;align-items:center">' +
'<div class="progress "><div class="progress-bar" style="width: 0%"></div></div><b class="ml10" style="flex:1"></b><div class="close">X</div></div></div>';
});
},
// BeforeUpload: function (up, file) {
// set_upload_param(up, file.name, true);
// console.log(222222)
// },
UploadProgress: function (up, file) {
var d = document.getElementById(file.id);
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
var prog = d.getElementsByTagName('div')[1];
var progBar = prog.getElementsByTagName('div')[0]
progBar.style.width = 2 * file.percent + 'px';
progBar.setAttribute('aria-valuenow', file.percent);
},
//上传图片成功回调
FileUploaded: function (up, file, info) {
if (info.status == 200)
{
$('#'+type).attr('src',host+'/'+g_object_name)
} else
{
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
}
},
Error: function (up, err) {
// document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
}
}
});
uploader.init();