关于阿里云 OSS 上传 pdf 和 excel的问题

遇到的什么异常？贴出来看看啊

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

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

再来就是DOM中的代码，基本就是作为一个容器的功能。他能使你在文件上传后在网页上放一个假的文件（这里多说一句：之前针对图片是可以展示的，后来由于需求去掉了）

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

分别对应的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",],//这个参数只有编辑文件的时候有，如果数组内容为空，实际效果和上传文件方法差不多

}

1. 文件的读取（示例）

2. 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

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

阿里云限量红包
https://www.aliyun.com/minisite/goods?userCode=v6vhcyn8

腾讯云大额红包
https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=b0c7af9380d6324294316347ba2c8a49&from=console

阿里云最新活动
https://www.aliyun.com/activity?userCode=v6vhcyn8

腾讯云最新活动
https://cloud.tencent.com/act/cps/redirect?redirect=1074&;cps_key=b0c7af9380d6324294316347ba2c8a49&from=console

国外的肯定是瓦工啊
https://bwh88.net/aff.php?aff=29651