阿里云OSS直传多文件上传遇到的问题及解决方案

我会带着你远行 2021-09-14 11:32 423阅读 0赞

本人萌新，刚实习不久，在上一个项目需求中，需要用到阿里云的文件直传服务，通过各种找，最终找了一个比较靠谱的demo，基于plupload插件的一个前端文件上传插件。然后自己再进行了二次封装，并对其中的多文件上传bug进行了处理，其实道理很简单，说出来大家就懂，就是不断的看文档，看文档，看文档。先上干货。关于多文件上传的bug会在代码中进行注释说明。

首先要在项目中引用plupload的官方JS文件，这个可以自行百度。

再来就是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>

二次封装的具体代码比较繁琐，在这里就只放一张图片，展示一下大体的代码结构

![20171215155236128][]

在二次封装中，我做了三个比较具体的功能，分别是文件上传，文件读取，以及文件编辑。

分别对应的JS调用。

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 =\{

"headUrl":"http://uniopn-file-test.oss-cn-hangzhou.aliyuncs.com/",

//鉴于之前上传的时候没有头部URL，所以服务端返回的路径数组可能需要加个头，当然也可以不填

"containId":"container2",

"fileSize":64,

"infoSize":150,

“showFileByte”:true，

上面基本是写给部门开发人员的文档内容，下面我将对上传文件的核心代码进行讲解（包括多文件上传的bug）

![20171215162800972][]

先来看uploader的初始化，基本就是把一些必填的参数传进去，需要着重关注的是multi\_selection，filters，init参数。

multi\_selection：true or false 是否支持多文件上传，默认为true，支持

filters：这个参数可以填的内容比较多，具体参考puolouder的官方API文档，我只写了限制文件大小（还可以限制文件类型等，有试过）

init：![20171215163502125][]黄色标注的是参数，蓝色标注的是方法，方法具体见官方文档，我只对参数进行说明。根据init参数里的内容已经可以看出来，这个参数里的函数会在文件上传的过程中被触发。

接下来我将一个步骤一个步骤进行讲解。

第一步：PostInit![20171215163816420][]

这个初始化上传的动作中，前面几句都是对DOM的操作可以不看，注意红框内的内容，这个绑定事件是用来消除puploader组件经过我的改造之后的一个bug，如果去掉这句话，你会发现，每次上传文件后，文件上传按钮视觉上向右移动了一格，且点击按钮依旧可以上传文件，但如果你点击前一个上传的文件（该文件占用了本来按钮呆的位置），你竟然能执行上传文件操作。

第二步： FilesAdded:

function(up,files)\{  
      uploader.start();\},

在添加文件的时候我基本没做什么操作，就只用start操作启动了文件的上传，就不做过多的说明了

第三步：BeforeUpload

![20171215164700292][]

这里面的代码很多，但最重要的就是这句，重新设置自定义参数，之前官方给的demo里并没有BeforeUpload,所以我的多文件上传就一直存在bug，后来发现，我上传的文件除了第一个和最后一个，中间的文件，在生成路径的时候没问题，但是在上传的时候就统一变成了最后一个文件的路径，主要还是因为没有修改这个自定义参数组，当然你可以不去重新设置除了fileName和Key之外的其他参数。

第四步：UploadProgress

基本用于进度条的制作，不多做概述

第五步：FileUploaded

文件上传成功后的一些处理。

由于代码托管在码云上，访问权限有所限制，如果有人对源码感兴趣，可以留下联系方式（第一次发文，不喜勿喷）

要源码的加我QQ 380205984

是阿里云的OSS上传不好用吗，这么多人看这个，估计真正看代码思路和解决方案的也没几个，上来觉得这东西挺复杂不如找别人要一份，年轻人你思想hin危险呢~

[20171215155236128]: /images/20210813/e7ea033684254d88af4e63f13be96f98.png
[20171215162800972]: /images/20210813/f35c018f24bf450eb34b3b2ad0f80cbc.png
[20171215163502125]: /images/20210813/da8bd9b8dcb94cbaa9c5ba12b58a7eb0.png
[20171215163816420]: /images/20210813/e8d4575419334f81ad90e91adc5895e1.png
[20171215164700292]: /images/20210813/38298a9c30064ecbaee4679dabb124a7.png