使用阿里云的oss服务在前端进行文件上传踩过的坑

直接在前端使用阿里云的oss服务向oss上传文件有现成的js写的sdk

项目地址:https://github.com/aliyun-UED/aliyun-sdk-js

使用js上传的example地址:https://github.com/aliyun-UED/oss-js-upload

使用上面的example中的例子做好相关的配置后可以直接进行文件的上传操作,但是当文件的上传大小超过切片大小时,会对改文件进行切片上传操作,这个时候,文件总是在上传成功后进行文件的拼接操作时失败,这个时候注意了,在里面有几个坑。

1.由于是使用的跨域访问的方式进行的文件上传操作所以先要设置允许跨域访问,在oss的访问规则中添加“Access-Control-Allow-Origin”的访问权限  response的头部信息中添加“Access-Control-Allow-Origin”

2.由于是跨域访问,所以返回后的response的头部信息中的head的值是无法获取的,分片上传时,很重要的一个值ETag是存放在response的head里面的,此时,这个值根本取不到

针对aliyun-UED所给的sdk和example文件分片上传失败的bug,解决方案如下:

  当进行跨域访问的时候,要想可以读取response中头部信息需要在response头部信息中添加"Access-Control-Expose-Headers“值为允许web端访问得到header值,但是很可惜,服务器端是不受控的,这个解决方案被淘汰了。

  阅读阿里云的oss帮助文档,oss提供了一个listparts的功能,我们可以在所有的全部上传成功后进行listparts的请求获取所有的分片信息,取出返回的分片信息进行重组后,使用重组后的数据进行文件拼接请求,这样文件就上传成功了,部分实现代码如下:

  

 1 var complete = function () {
 2             // console.log("Completing upload...");
 3
 4             for (var i in multipartMap.Parts) {
 5                 delete multipartMap.Parts[i].loaded;
 6             }
 7
 8             var doneParams = {
 9                 Bucket: self.bucket, //self._config.bucket,
10                 Key: uploadfile.OssUploadControlParm.Key, //self.keygeneratefunc(self,uploadfile), //options.key,
11                 CompleteMultipartUpload: multipartMap,
12                 UploadId: uploadId
13             };
14
15             self.oss.listParts({//获取分片
16                 UploadId: uploadId,
17                 Bucket: self._config.bucket,
18                 Key: options.key
19             }, function (err, data) {
20                 var parts = data.Parts;
21                 multipartMap.Parts = [];
22                 var part = null;
23                 for (var i = 0; i < parts.length; i++) {
24                     part = parts[i];
25                     multipartMap.Parts.push({
26                         PartNumber: part.PartNumber,
27                         ETag: part.ETag
28                     });
29                 }
30                 self.oss.completeMultipartUpload(doneParams, callback);
31             });
32
33         };

  注意红色的代码,这个就是对example中分片上传失败的bug的修复

时间: 2024-10-05 04:19:17

使用阿里云的oss服务在前端进行文件上传踩过的坑的相关文章

前端大文件上传解决方案支持分片断点上传

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据.上传影音文件等.如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成. 下面从文件上传方式入手,整理大文件上传的思路,并给出了相关实例代码,由于PHP内置了比较方便的文件拆分和拼接方法,因此服务端代码使用

WebUploader 前端大文件上传

需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分,这部分代码封装在bjui-all.js文件中, 在bjui-all.js文件中的全局变量定义中有以下

tornado结合前端进行文件上传

在表单中我们获取用户提交的数据,使用的是get_argument,复选框使用的是get_arguments,但是文件的不一样,文件的使用request.files. form文件上传 html代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>

B/S 前端大文件上传

前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践.该博客重在实践. 一. Http协议原理简介 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且H

局域网 前端大文件上传

前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践.该博客重在实践. 一. Http协议原理简介 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且H

JavaScript进阶 九 JS实现本地文件上传至阿里云服务器

JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作.这次需要实现将本地打包好的文件上传至阿里云服务器.使用前面的图片文件上传方法无法完成此操作.操作界面如下: 思路 本地与服务端传输文件的格式应该是熟悉的Base64格式.首先需要将本地文件转换为Base64格式,传输至服务端后,在服务端再将Base64格式的文件转换为原始文件. 源码解析 控制器 /

文件上传更新服务相关

需求: 客户端向服务端发送一次请求,请求是一系列配置文件的文件名.当前客户端所持有文件的版本号.期待服务端返回的数据形式(url或二进制数据).当请求的配置文件有更新,服务端返回相应的url或二进制数据.之所以要分url和二进制数据,因为有的配置文件比较小且比较重要需要马上获取到数据:而有的配置文件稍微大一些,重要性比较低,可以在客户端拉线程慢慢下. 最终实现: 分为后台管理系统(负责文件上传)和数据更新服务. 文件上传部分是用Vue.js+KOA实现.其中关于文件上传那块,浏览器端使用Ajax

Spring Cloud下使用Feign Form实现微服务之间的文件上传

背景 ? Spring Cloud现在已经被越来越多的公司采用了,微服务架构比传统意义上的单服务架构从复杂度上多了很多,出现了很多复杂的场景.比如,我们的产品是个app,支持第三方登录功能,在手机端调用第三方授权接口之后,返回了用户的相关信息,比如open_id,性别,头像等.这些信息我们需要保存在我们服务器上,当时针对头像是应该保存图片的url还是图片本身发生了歧义,在一番讨论之后,得出的结果是,我们需要通过url将图片下载到我们本地,然后调用我们自己的文件微服务中上传功能保存起来. 工具 I

开个坑, 写个阿里云开放储存服务(OSS)的C++版SDK以及客户端

这应该是继我研究手册QQ协议后的第2个稍微正式一点的网络程序, 不只是Scoket套接字编程, 还涉及到更多的HTTP协议知识! 阿里云开放储存服务OSS官方已经提供了不少SDK, 包括PHP/Python/Java/C#, ... 但唯独没有C/C++的, 很可惜. 不过, 论坛上倒是收集了不少C/C++版本的SDK. 但我还是想自己写一个试试, 于是就有了这个坑!!! 这个坑, 不是今天开的, 具体时间应该回到6号(今天10号), 不过我都不敢相信, 排除第3方代码, 已经有80多KB了啊!