# OBSFormUploadDemo-frontend

**Repository Path**: HuaweiCloudDeveloper/obsform-upload-demo-frontend

## Basic Information

- **Project Name**: OBSFormUploadDemo-frontend
- **Description**: 表单数据上传至华为云OBS前端代码 


- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-02
- **Last Updated**: 2023-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OBSFormUploadDemo-frontend

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


## 软件架构

### 业务流程图

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


## 安装教程

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

## 项目配置

### 1、前端代码配置

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

#### 方式一：Upload By Form

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

- /api-xxx 请求用于从服务端获取 signature/policy 等信息。
  ![img.png](picture/前端填入参数1.png)
  ![img.png](picture/前端填入参数2.png)
- 上传成功页面，上传成功后会跳转到 `success_action_redirect` 参数中填写的地址，此页面可从 location.search 中获取成功返回的参数。同时，后端项目中生成 policy 时也需要加入 `success_action_redirect` 参数。
  ![img.png](picture/前端成功页面1.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)


- 准备表 JavaScript 模块，配置AK、OBS桶名、OBS域名，并将生成的请求参数放入 FormData 对象。
  ![img.png](picture/方式二填入参数1.png)
  ![img.png](picture/方式二填入参数2.png)


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




### 2、配置代理

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

配置后端路径和端口：

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


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

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. 选择文件填写文件名上传


## 后端代码

后端代码参考：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 上的优秀开源项目