Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carsonxu patch 1 #15849

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Carsonxu patch 1 #15849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
98dfd12
Update Web端直传实践.md
carsonxu Jul 4, 2023
b7e4612
Update uni-app直传实践.md
carsonxu Jul 4, 2023
650d41b
Update 小程序直传实践.md
carsonxu Jul 4, 2023
7eb48a6
Update uni-app直传实践.md
carsonxu Jul 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 17 additions & 18 deletions product/存储与CDN/对象存储 4.0/最佳实践/数据直传/Web端直传实践.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,9 @@
如何计算签名可参考文档 [请求签名](https://cloud.tencent.com/document/product/436/7778)。
服务端使用 Nodejs 计算签名代码可参考 [Nodejs 示例](https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts.js)。

### Web 端上传示例

以下代码同时举例了 [PUT Object ](https://cloud.tencent.com/document/product/436/7749) 接口（推荐使用）和[POST Object ](https://cloud.tencent.com/document/product/436/14690) 接口，操作指引如下：

#### 使用 AJAX PUT 上传
### Web 端 PutObject 上传

AJAX 上传需要浏览器支持基本的 HTML5 特性，当前方案使用 [PUT Object ](https://cloud.tencent.com/document/product/436/7749) 文档，操作指引如下：

Expand Down Expand Up @@ -192,7 +190,7 @@ AJAX 上传需要浏览器支持基本的 HTML5 特性，当前方案使用 [PUT
执行效果如下图：
![Ajax 上传](https://main.qcloudimg.com/raw/4bfc2883d71deddccc76b250ebb6a051.png)

#### 使用 AJAX POST 上传
### Web 端 PostObject 上传

AJAX 上传需要浏览器支持基本的 HTML5 特性，当前方案使用 [Post Object ](https://cloud.tencent.com/document/product/436/14690) 接口。操作指引：

Expand Down Expand Up @@ -365,7 +363,7 @@ AJAX 上传需要浏览器支持基本的 HTML5 特性，当前方案使用 [Pos
执行效果如下图：
![Ajax 上传](https://main.qcloudimg.com/raw/4bfc2883d71deddccc76b250ebb6a051.png)

#### 使用 Form 表单上传
### Web 端 Form 表单上传

Form 表单上传支持低版本的浏览器的上传（如 IE8），当前方案使用 [Post Object ](https://cloud.tencent.com/document/product/436/14690) 接口。操作指引：

Expand Down Expand Up @@ -403,7 +401,6 @@ Form 表单上传支持低版本的浏览器的上传（如 IE8），当前方
enctype="multipart/form-data"
accept="*/*"
>
<input id="name" name="name" type="hidden" value="" />
<input name="success_action_status" type="hidden" value="200" />
<input
id="success_action_redirect"
Expand Down Expand Up @@ -572,9 +569,15 @@ Form 表单上传支持低版本的浏览器的上传（如 IE8），当前方
执行效果如下图：
![Form 表单上传](https://main.qcloudimg.com/raw/ef666461bc5f88715f28934393ebe4f4.png)

#### 上传时限制文件后缀
## 上传时限制

### 限制上传文件后缀

##### 前端限制
#### 服务端签名限制

可参考服务端签名代码 [Nodejs 示例](https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts.js)，对 extWhiteList 做处理。

#### 前端限制

参考上方 AJAX PUT 上传，只需要在选择文件时加一层判断即可。

Expand Down Expand Up @@ -608,13 +611,15 @@ document.getElementById('submitBtn').onclick = function (e) {
};
```

##### 服务端签名限制
### 限制上传文件大小

可参考服务端签名代码 [Nodejs 示例](https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts.js)，对 extWhiteList 做处理。
#### 服务端签名限制

#### 上传时限制文件大小
可参考服务端签名代码 [Nodejs 示例](https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts.js)。
POST 上传的 post-policy 签名可添加 conditions: ['content-length-range', 1, 5242880 ]，代表上传文件大小范围为 1B - 5MB。
或申请临时密钥时添加 condition: 'numeric_less_than_equal: { 'cos:content-length': 5242880 }，代表上传文件最大为 5MB。

##### 前端限制
#### 前端限制

参考上方 AJAX PUT 上传，只需要在选择文件时加一层判断即可。

Expand Down Expand Up @@ -644,12 +649,6 @@ document.getElementById('submitBtn').onclick = function (e) {
};
```

##### 服务端签名限制

可参考服务端签名代码 [Nodejs 示例](https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts.js)。
POST 上传的 post-policy 签名可添加 conditions: ['content-length-range', 1, 5242880 ]，代表上传文件大小范围为 1B - 5MB。
或申请临时密钥时添加 condition: 'numeric_less_than_equal: { 'cos:content-length': 5242880 }，代表上传文件最大为 5MB。

## 相关文档

若您有更丰富的接口调用需求，请参考以下 JavaScript SDK 文档：
Expand Down
Loading