OBSFormUploadDemo-frontend

介绍

表单数据上传至华为云OBS前端代码

软件架构

业务流程图

安装教程

1. 在本地安装 node
2. 进入项目文件夹安装 npm 依赖

npm install

项目配置

1、前端代码配置

本前端demo准备了两种表单上传方式

方式一：Upload By Form

• 准备表单HTML页面，配置AK、OBS桶名、OBS域名，并将生成的请求参数填入HTML页面。

• /api-xxx 请求用于从服务端获取 signature/policy 等信息。

• 上传成功页面，上传成功后会跳转到 success_action_redirect 参数中填写的地址，此页面可从 location.search 中获取成功返回的参数。同时，后端项目中生成 policy 时也需要加入 success_action_redirect 参数。

方式二：Upload By XHR

即通过Ajax

• 由于OBS以桶为单位提供基于HTTP/HTTPS协议的分布式存储服务， 而浏览器默认不允许Ajax跨域请求，所以我们先配置桶的CORS以支持Ajax跨域访问（下图为通过控制台配置）。可参考 配置桶的CORS

• 获取policy和signature；通过OBS桶名、域名拼接obs上传路径。

• 准备表 JavaScript 模块，配置AK、OBS桶名、OBS域名，并将生成的请求参数放入 FormData 对象。

• 页面使用Ajax

2、配置代理

后端服务器未设置允许跨域，所以在本地使用了代理

配置后端路径和端口：

3、启动前端服务，选择本地文件，进行表单上传。

1. 启动服务

npm start

2. 在浏览器中打开

• 方式1：http://localhost:3000/obs-form-upload

• 方式2：http://localhost:3000/obs-form-upload2

3. 选择文件填写文件名上传

后端代码

后端代码参考：https://gitee.com/HuaweiCloudDeveloper/OBSFormUploadDemo-backend

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.mdGitee 上的优秀开源项目