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、启动前端服务，选择本地文件，进行表单上传。
- 启动服务
npm start
- 在浏览器中打开
- 选择文件填写文件名上传