aliyun-ued / oss-js-upload

浏览器端直接上传文件到阿里云 OSS

oss-js-upload

目前不再维护

请使用 https://help.aliyun.com/document_detail/32069.html

简介

支持在在浏览器端直接上传文件到阿里云 OSS.

注意, 从 0.2.0 版本开始, 将基于 aliyun sdk js 开发. 请注意 demo.html 中的变化.

目前已经支持:

• ie10及以上 ie 浏览器, 以及其他主流浏览器(还未全面测试)
• 支持使用阿里云 STS 临时 Token
• 支持文件上传 md5 校验, 保证调用的安全性.
• 文件分块上传, 上传文件大小理论上无限制
• 文件上传进度

使用

配置 OSS

需要先配置 oss bucket 的 cors. 在开发/调试时, 可以做如下配置

• 将 "来源", "Allowed Header" 配置为 *
• 将 "Method" 全部勾选
• 如果需要进行文件分块上传, 需要将 "Expose Header" 配置为 etag 和 x-oss-request-id

调试通过后, 根据需要最小化相关配置

配置 RAM

从安全角度出发, 阿里云 sts 服务停掉了 getFederation 接口, 建议使用新的, 更安全的 assumeRole 接口. 原先正在使用 getFederation 接口 的用户可以继续使用, 但是建议更新到 assumeRole 接口.

配置方法一

使用 RAM 的 Open API 进行配置，也需要先在控制台开通 RAM 服务。

• 打开本代码中的 setupRAM.js
• 在阿里云控制台中找到自己账号的 id 并填入
• 将自己的根 AccessKey 和 AccessSecret 填入
• node setupRAM.js
• 如果创建成功, 会打印出 assumeRole 所需的 accessKeyId, accessKeySecret 和 roleARN, 记录下来

配置方法二

在阿里云 RAM 控制台也可以进行配置, 但是目前 RAM 控制台处于公测阶段, 需要申请公测资格, 因此推荐使用方法一

• 打开 RAM 控制台
• 新建一个用户
• 为用户添加 AliyunSTSAssumeRoleAccess 权限
• 为用户创建一对 AK, 记录下这个 AK, 控制台不会为你保存
• 新建一个角色
• 为角色添加 AliyunOSSFullAccess 权限, 记录下角色 ARN

安装

你可以通过如下两种方式中任意一种引入本项目：

1.bower

$ bower install oss-js-upload --save

2.直接下载

1. 下载本项目最新的 Release
2. 下载依赖 aliyun-sdk
3. 通过 <script src=""></script> 标签引入文件，注意将依赖放在前面

<script src="/path/to/aliyun-sdk/aliyun-sdk.min.js"></script>
<script src="/path/to/oss-js-upload.js"></script>

使用 demo (需要 Node.js 环境)

• 打开 demoServer.js 填入上面记录下来的 accessKeyId, secretAccessKey, accountId, roleARN 和 resource
• 打开 demo.html 填入 bucket 和 endpoint 参数, 其他参数根据需要进行配置
• 执行 npm install，安装 demo 依赖
• 执行 node demoServer.js
• 然后在浏览器中打开 http://localhost:3000/demo.html

在 demo.html 和 demoServer.js 中对各个参数都有详细说明

关于 stsToken

将文件上传到 oss 需要进行鉴权, 使用阿里云的 acessKey 和 keySecret 虽然可以成功上传但是会将你 accessKey 和 keySecret 暴露在浏览器端, 因此 不推荐使用, 强烈建议使用 STS token 进行鉴权. aliyunCredential 和 stsToken 必须提供一个, 如果同时提供, 将会使用 stsToken.

阿里云sts 文档 http://docs.aliyun.com/#/pub/ram/sts-user-guide/intro

获取 stsToken

stsToken 需要在自己的服务器上生成, 并传递给 oss-js-upload 如果你使用 nodejs 做服务器, 可以使用 aliyun nodejs sdk 获取 stsToken , 示例见 demoServer.js 如果你使用其他语言, 需要使用对应的 sdk 来获取 stsToken

oss-js-upload's Issues

在android4.2的游览器发生错误,xhr.send的时候只发送了header，没有发送body

参考，https://ghinda.net/article/jpeg-blob-ajax-android/
参考事例：http://jsfiddle.net/ghinda/fRgbf/
将var frOnload = function (e) {
result.md5 = hexToBase64(SparkMD5.ArrayBuffer.hash(e.target.result));
callback(null, result);
};
改为：
var frOnload = function (e) {
result.md5 = hexToBase64(SparkMD5.ArrayBuffer.hash(e.target.result));
result.blob = e.target.result;
callback(null, result);
};
就能正常使用了。

CORS里设置了Expose Header后，分块上传还是403

设置了etag和x-oss-request-id，分块还是失败？需要什么特殊处理吗？

使用 demo 步骤中应该加上一条： npm install

应该在

• 执行 node demoServer.js
  前加上一个步骤：
• npm install

RequestId:undefined

在页面上upload一张图片后报错RequestId:undefined，
stsToken中RequestId:“48BDBFD3-9336-4AD8-8C71-70A1F7B898B4”
但我在oss控制台查看发现这张图片已经上传上去了？
请问是什么原因导致错误的，怎样解决，现在不能获取图片路径

STS assumeRole 方案

20 Nov 2015的oss-js-upload.js有小bug，已解决

第54行~59行，改成：

this.oss = new ALY.OSS({
accessKeyId: this._config.stsToken.credentials.accessKeyId,
secretAccessKey: this._config.stsToken.credentials.accessKeySecret,
securityToken: this._config.stsToken.credentials.securityToken,
endpoint: this._config.endpoint,
apiVersion: '2013-10-15'
});

怎样支持 canvas形式处理后返回的base64数据

用 https://github.com/fengyuanchen/cropper 插件处理后的图片怎样通过oss-js-upload 发出请求？
期待您的回答

使用最新aliyun-sdk出现问题

在浏览器中oss-js-upload.js文件中报错self.oss.OssUpload is not a function

文件超过1M上传进度错误，上传不到阿里云

GetFederation 接口什么时候能恢复？现在这个例子用不了

oss-js-upload.js:54 Uncaught TypeError: Cannot read property 'AccessKeyId' of undefined

code: "UnknownError"
message: "Specified api is not found, please check your url and method."
retryable: false
statusCode: 404
time: "2015-09-12T11:06:09.600Z"

oncomplete 的callback 参数res啥也没有

上传文件成功了，oncomplete 的参数res只是 ｛requestId: undefined}，怎么回事？难道不该返回文件的地址吗？

小于100K的文件上传不了

文件大于１００K将会对文件做分块上传处理，小于１００K的文件总是上传失败这是什么原因？

支持 ie8, ie9

React native support

Hi guys,

Can you add support for react-native, or what's the best way to use OSS with react-native ?

🌅 : )

支持上传进度，取消上传