利用HTML5+的Uploader模块API实现基于MUI的文件上传

版权声明：本文为博主原创文章，未经博主允许不得转载。

最近由于公司项目的需要，使用HBuilder开发基于MUI的web版APP，其中有一个文件上传的功能，通过查询资料，发现利用HTML5+的Uploader模块的API能上传文件。经过一番折腾后，终于成功实现了多文件的上传，简单地记录一下主要的实现方法，方便以后使用。

//上传附件
function uploadFile(){
//文件集合
var files=[];
//服务器地址
var server=Util.getBaseURL() + "uploadFile";
var wt=plus.nativeUI.showWaiting();
var task=plus.uploader.createUpload(server,
{method:"POST"},
function(t,status){
//上传完成
if(status==200){
wt.close();
console.log("上传成功："+t.responseText);
//服务端返回的结果
var result = JSON.parse(t.responseText);
if(result.success){

for(var i=0;i<result.datas.length;i++){
if(i==result.datas.length-1){
attaIds += result.datas[i];
}else{
attaIds += result.datas[i]+",";
}
}

console.log("attaIds的值："+attaIds);

saveWorkReport();

}else{
console.log("上传失败："+status);
wt.close();
}

}else{
console.log("上传失败："+status);
wt.close();
}
}
);
//将文件集合添加到上传队列中
for(var i=0;i<files.length;i++){
var f=files[i];
task.addFile(f.path,{key:f.name});
}
task.start();
}

通过以上方法即可多文件上传至服务器。PS：经过这几天使用HBuilder开发，真心感觉很不错，代码提示很智能，大大提高了开发效率，而且还是国产的，必须支持啊。MUI前端框架做出来的效果也很接近原生APP，难怪原生开发没有以前那么受欢迎了。。。