# OBSFormUploadDemo-backend

**Repository Path**: HuaweiCloudDeveloper/OBSFormUploadDemo-backend

## Basic Information

- **Project Name**: OBSFormUploadDemo-backend
- **Description**: 用户在前端通过表单方式，上传数据至华为云OBS。
参考文档：https://support.huaweicloud.com/sdk-java-devg-obs/obs_21_0612.html
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-12-02
- **Last Updated**: 2022-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OBSFormUploadDemo-backend

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

## 软件架构

### 业务流程图

![](picture/业务流程图.png)




## 前置条件

- 已注册华为云账号，完成实名认证，同时账号不能处于欠费或冻结状态；
- 账号需有足够的余额或代金券；
- 工具安装： 安装好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的依赖；
点击获取[参考链接](https://support.huaweicloud.com/sdk-java-devg-obs/obs_21_0105.html)

![img.png](picture/SDK.png)

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

![img.png](picture/配置项.png)

> 参数说明：
> - obs.endpoint：OBS域名
> - obs.access.key：AK
> - obs.secret.key：SK
> - obs.bucket.name：OBS桶名
> - obs.file：OBS的对象


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

![](picture/obsclient.png)

#### 5、 启动后端服务

![img.png](picture/后端运行.png)

<br>


### 前端代码调用

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

将 [（点击前往）前端源码](https://gitee.com/DTSEDeveloper/obsform-upload-demo-frontend/) 拉到本地，在本地进入项目文件夹安装 npm 依赖
```bash
npm install
```

#### 2、前端代码配置

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

##### 方式一：Upload By Form


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

- /obs 请求用于从服务端获取 signature/policy 等信息。
  ![img.png](picture/前端填入参数1.png)
  ![img.png](picture/前端填入参数2.png)


##### 方式二：Upload By XHR

即通过Ajax

- 由于OBS以桶为单位提供基于HTTP/HTTPS协议的分布式存储服务，
而浏览器默认不允许Ajax跨域请求，所以我们先配置桶的CORS以支持Ajax跨域访问（下图为通过控制台配置）。可参考
[配置桶的CORS](https://support.huaweicloud.com/sdk-browserjs-devg-obs/obs_24_0201.html)
![img.png](picture/配置桶的CORS.png)


- 获取policy和signature；通过OBS桶名、域名拼接obs上传路径。
  ![img.png](picture/方式二配置1.png)


- 准备表单HTML页面，配置AK、OBS桶名、OBS域名，并将生成的请求参数填入HTML页面。
  ![img.png](picture/方式二填入参数1.png)
  ![img.png](picture/方式二填入参数2.png)


- 页面使用Ajax
  ![img.png](picture/方式二配置2.png)




#### 3、配置代理

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

配置后端路径和端口：

![img.png](picture/代理配置.png)


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

1. 启动服务
```bash
npm start
```

2. 在浏览器中打开 

- 方式1：http://localhost:3000/obs-form-upload
![img.png](picture/方式1访问.png)


- 方式2：http://localhost:3000/obs-form-upload2
![img.png](picture/方式2访问.png)

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