本人萌新,刚实习不久,在上一个项目需求中,需要用到阿里云的文件直传服务,通过各种找,最终找了一个比较靠谱的demo,基于plupload插件的一个前端文件上传插件。然后自己再进行了二次封装,并对其中的多文件上传bug进行了处理,其实道理很简单,说出来大家就懂,就是不断的看文档,看文档,看文档。先上干货。关于多文件上传的bug会在代码中进行注释说明。
首先要在项目中引用plupload的官方JS文件,这个可以自行百度。
<script src="../static/js/plupload.full.min.js"></script>
再来就是DOM中的代码,基本就是作为一个容器的功能。他能使你在文件上传后在网页上放一个假的文件(这里多说一句:之前针对图片是可以展示的,后来由于需求去掉了)
<div class="file-container" id = "container" >
<div class="file-choose" id = "file-choose"><i class="pz-icon icon-add file-add"></i></div>
</div>
<div class="file-container" id = "container2" ></div>
<div class="file-container" id = "container3" >
<div class="file-choose" id = "file-choose3"><i class="pz-icon icon-add file-add"></i></div>
</div>
container" >
<div class="file-choose" id = "file-choose"><i class="pz-icon icon-add file-add"></i></div>
</div>
<div class="file-container" id = "container2" ></div>
<div class="file-container" id = "container3" >
<div class="file-choose" id = "file-choose3"><i class="pz-icon icon-add file-add"></i></div>
</div>
二次封装的具体代码比较繁琐,在这里就只放一张图片,展示一下大体的代码结构
在二次封装中,我做了三个比较具体的功能,分别是文件上传,文件读取,以及文件编辑。
分别对应的JS调用。
A:
var postFile=new pizzaCmd.fileProcessing.Fn("postFiles",JsonData);
var readFiles=new pizzaCmd.fileProcessing.Fn("readFiles",JsonData);
var editorFiles=new pizzaCmd.fileProcessing.Fn("editorFiles",JsonData);
或者
B:
pizzaCmd.fileProcessing.postFiles(JsonData);
pizzaCmd.fileProcessing.readFiles (JsonData);
pizzaCmd.fileProcessing.editorFiles (JsonData);
1. 两大类的区别:
A:适用于一个页面有多个文件上传组件,每次可以用new方法新建一个实例,最终结果会保存在每个实例的result数组中(postFile.result)
B:适用于一个页面只使用一次文件上传组件,最终的结果保存在pizzaCmd.fileProcessing.result数组中。
1. 三种功能
postFile:只包含文件上传功能
容器中生成一个可以选择文件的按钮。
readFiles:只包含文件读取下载功能
容器中生成一个可以下载文件的文件列表
editorFiles:编辑文件
包括新文件的上传以及旧文件的删除。
Jsondata参数详解
红色部分是必填参数,绿色部分是选填参数,关于参数的默认值请看注释
1. 文件的上传/编辑(示例)
JsonData = {
"containId":"container", //容器ID,必填
"butId":"file-choose", //选择文件按钮ID,必填
//阿里云文件上传必填参数,具体是服务端调接口返回,还是写死,自己决定
"ossKey":{
"policy":"balabal",
"OSSAccessKeyId":"blalala",
"url":"bilipala",
"signature":"lalla",
},
"showFileByte":true, //是否显示文件大小如(30Kb)默认为true
"multi_selection":true, //是否支持多文件上传 默认为false
"fileSize":64, //文件显示大小 默认为64px,这里单位是px,传数字就行
"infoSize":150, //内容区宽度,默认为100px
“maxByteSize”:”30Mb”,//最大单个文件上传大小,注意这里可以填的是“xxxB” 、“xxxKb”、”xxxMb”,别的格式没试过
“showProgress“:“true,//是否显示进度条,鉴于进度条做的还比较丑,可以选择false,默认为true
//pathNameFn表示文件命名规则前缀,注意这个方法必须有返回值,具体命名规则请自行定义(主要是为了防止文件名重复),最终得到的文件名是该方法返回的前缀名+文件大小+文件名,后面的文件大小和文件名在调用的方法中处理,请务必把前缀完善
pathNameFn:function(){
var pathName ="" ;
var uuid =pizzaCmd.fileProcessing.getGuid();
var time = newDate().Format("yyyyMM");
pathName ="rest/" + time + "/" + uuid + "_"
return pathName;
},
//回调函数将在文件上传成功后执行,其他情况在函数内部执行,一般都是返回错误
callBack:function(){
alert("我是回调");
}
"fileArr":["rest/201710/b198195f-0370-47ba-bd99-e9480badffe3_12800_测试幻灯片.ppt","rest/201710/e3b3dc93-766b-4d96-a6ae-d5308ae82db3_10326_测试文档.docx","rest/201710/572f1361-2414-4aa1-b806-dd524334a34f_9429_导入用户模板.xlsx","rest/201710/61c5b220-801b-4666-bc77-8db8141a36df_23464_工作单.png",],//这个参数只有编辑文件的时候有,如果数组内容为空,实际效果和上传文件方法差不多
}
2. 文件的读取(示例)
3. var JsonData2 ={
"fileArr":["rest/201710/b198195f-0370-47ba-bd99-e9480badffe3_12800_测试幻灯片.ppt","rest/201710/e3b3dc93-766b-4d96-a6ae-d5308ae82db3_10326_测试文档.docx","rest/201710/572f1361-2414-4aa1-b806-dd524334a34f_9429_导入用户模板.xlsx","rest/201710/61c5b220-801b-4666-bc77-8db8141a36df_23464_工作单.png",],
"headUrl":"http://uniopn-file-test.oss-cn-hangzhou.aliyuncs.com/",
//鉴于之前上传的时候没有头部URL,所以服务端返回的路径数组可能需要加个头,当然也可以不填
"containId":"container2",
"fileSize":64,
"infoSize":150,
“showFileByte”:true,
}
上面基本是写给部门开发人员的文档内容,下面我将对上传文件的核心代码进行讲解(包括多文件上传的bug)
先来看uploader的初始化,基本就是把一些必填的参数传进去,需要着重关注的是multi_selection,filters,init参数。
multi_selection:true or false 是否支持多文件上传,默认为true,支持
filters:这个参数可以填的内容比较多,具体参考puolouder的官方API文档,我只写了限制文件大小(还可以限制文件类型等,有试过)
init:黄色标注的是参数,蓝色标注的是方法,方法具体见官方文档,我只对参数进行说明。根据init参数里的内容已经可以看出来,这个参数里的函数会在文件上传的过程中被触发。
接下来我将一个步骤一个步骤进行讲解。
第一步:PostInit
这个初始化上传的动作中,前面几句都是对DOM的操作可以不看,注意红框内的内容,这个绑定事件是用来消除puploader组件经过我的改造之后的一个bug,如果去掉这句话,你会发现,每次上传文件后,文件上传按钮视觉上向右移动了一格,且点击按钮依旧可以上传文件,但如果你点击前一个上传的文件(该文件占用了本来按钮呆的位置),你竟然能执行上传文件操作。
第二步: FilesAdded:
function(up,files){
uploader.start();},
在添加文件的时候我基本没做什么操作,就只用start操作启动了文件的上传,就不做过多的说明了
第三步:BeforeUpload
这里面的代码很多,但最重要的就是这句,重新设置自定义参数,之前官方给的demo里并没有BeforeUpload,所以我的多文件上传就一直存在bug,后来发现,我上传的文件除了第一个和最后一个,中间的文件,在生成路径的时候没问题,但是在上传的时候就统一变成了最后一个文件的路径,主要还是因为没有修改这个自定义参数组,当然你可以不去重新设置除了fileName和Key之外的其他参数。
第四步:UploadProgress
基本用于进度条的制作,不多做概述
第五步:FileUploaded
文件上传成功后的一些处理。
由于代码托管在码云上,访问权限有所限制,如果有人对源码感兴趣,可以留下联系方式(第一次发文,不喜勿喷)
要源码的加我QQ 380205984
是阿里云的OSS上传不好用吗,这么多人看这个,估计真正看代码思路和解决方案的也没几个,上来觉得这东西挺复杂不如找别人要一份,年轻人你思想hin危险呢~