OBSFormUploadDemo-backend

介绍

数据基于表单方式上传至华为云OBS 后端代码

软件架构

业务流程图

前置条件

• 已注册华为云账号，完成实名认证，同时账号不能处于欠费或冻结状态；
• 账号需有足够的余额或代金券；
• 工具安装： 安装好IDEA、配置Java环境；安装好VScode、node环境

使用限制

• 基于表单上传是使用HTML表单形式上传对象到指定桶中，对象最大不能超过5GB

• 需要在后端生成policy

使用教程

创建并配置云端环境

• 创建用户访问秘钥 ：https://support.huaweicloud.com/qs-obs/obs_qs_0005.html
• 创建OBS桶 ：https://support.huaweicloud.com/usermanual-obs/zh-cn_topic_0045829088.html

后端代码配置

1、将后端源码拉到本地，使用IDEA打开；

2、 配置好pom.xml的OBS SDK的依赖；

点击获取参考链接

3、 修改application.properties中的配置项；

参数说明：

• obs.endpoint：OBS域名
• obs.access.key：AK
• obs.secret.key：SK
• obs.bucket.name：OBS桶名
• obs.file：OBS的对象

4、 使用ObsClient.createPostSignature生成用于鉴权的请求参数；

5、 启动后端服务

前端代码调用

1、获取前端代码并安装依赖

将 （点击前往）前端源码 拉到本地，在本地进入项目文件夹安装 npm 依赖

npm install

2、前端代码配置

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

方式一：Upload By Form

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

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

方式二：Upload By XHR

即通过Ajax

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

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

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

• 页面使用Ajax

3、配置代理

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

配置后端路径和端口：

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

1. 启动服务

npm start

2. 在浏览器中打开

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

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

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