Dreame_Architect
VirtualKingdom
采纳率100%
2018-06-29 03:29 阅读 4.3k
已采纳

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

20

图片说明问题是把pdf模板已经使用itext写好了,然后使用pdfWriter,getInstance给前端,但是前端说他们不好处理,最好给他们一个下连接,
所以想到阿里云的 OSS,想把pdf写好直接上传到阿里云,那么现在遇到的问题就是 pdfWriter.getOs()
返回的是 OutputStreamCounter 在转换成 ByteArrayOutputStream 的是偶出现转换异常 ;图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    gf0515 Fatal Error 2018-06-29 04:07

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

    点赞 评论 复制链接分享
  • weixin_42387648 weixin_42387648 2018-06-29 05:28

    本人萌新,刚实习不久,在上一个项目需求中,需要用到阿里云的文件直传服务,通过各种找,最终找了一个比较靠谱的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

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

    点赞 评论 复制链接分享
  • sacsde13 sacsde13 2020-11-26 00:08

    阿里云限量红包
    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

    点赞 评论 复制链接分享

相关推荐