利用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，难怪原生开发没有以前那么受欢迎了。。。