PHP后端生成签名后uniapp前端直传华为云OBS记录

uniapp 官方合作的云存储是阿里云和腾讯云，但我们公司选的云存储服务恰好都不是这两家，是华为云 OBS。网上搜了多次，没有能成功的案例分享。但是，考虑到网上关于华为云性能优异的测评报告，以及我对华为这家公司的好感，我还是想努力把这条路走通。因此，走上了坚苦的踩坑之路。

但大家不必重复这个踩坑经历了，我直接上拿走即用的代码。

技术路线确定：
1.前端产生签名前端直传华为云OBS：好处是不经过自家服务器周转，减少一个环节，上传速度更快。坏处：前端产生签名的过程中，会将 AK，SK 等核心账号信息暴露，是极其危险的。
2. 后端签名前端获取后直传华为云OBS：好处同上，而且由于是后端生成签名，前端获取有时效性的签名后直传云端，因此没有泄露核心账号信息的风险。

我选择第二条路线。以下是上传视频文件的步骤（图片上传相似，多文件在上传前增加一个循环而已。下面不只是前端代码，也包括必要的后端代码）：

1.后端生成上传文件到OBS 的签名（PHP）的代码：
在做这一步之前，让后台技术同事先在服务器目录下安装 OBS的 PHP SKD，这一步有详细文档，此处忽略。

     $object = $this->input->post('file_name')?:''; //文件名$file_type = $this->input->post('file_type')?: ''; //文件类型$obsClient = new ObsClient ( [ 'key' => '***',           //OBS 中的 AK'secret' => '***',      //OBS 中的 SK'endpoint' => 'https://obs.cn-north-4.myhuaweicloud.com', //注意实际的终点可能不同'signature' => 'obs',] );// URL有效期，3600秒$expires = 3600;// 上传对象$resp = $obsClient->createPostSignature( [ 'Bucket' => '***',  //你自己的桶名（bucket)'Key' => $object,'Expires' => $expires,'FormParams' => ['x-obs-acl' => 'public-read','content-type' => $file_type,]] );// printf($resp);$data['Accesskeyid'] = '***';  //OBS 中的AK$data['Policy'] = $resp['Policy'];$data['Signature'] = $resp['Signature'];echo json_encode($data);} ```2. 前端选择视频文件，生成必要信息：
```select_video(){var _this = this;uni.chooseVideo({maxDuration: 60,  //拍摄视频最长拍摄时间，单位秒count:1, //上传视频的数量sourceType:['camera','album'],success: (res) => {console.log(res)_this.video_src = res.tempFilePath;let index1 = res.tempFilePath.lastIndexOf('/');  let index2 = res.tempFilePath.lastIndexOf('.');_this.file_name = res.tempFilePath.substring(index1+1,res.tempFilePath.length);   //获取文件名_this.file_type = res.tempFilePath.substring(index2+1, res.tempFilePath.length); // 获取文件后缀名，即文件类型_this.key = 'video/' + _this.file_name;console.log(_this.file_name)_this.is_video = 1;},})}, ```3. 前端获取上传文件的签名并直传 OBS（一步完成）：
可以写在当前页面，也可以封装成公共方法，建议封装。```function get_obs_signature(file_path, file_name, file_type){console.log(file_name)return new Promise((resolve, reject)=>{uni.request({url: '***',    //PHP获取签名的接口路径method: 'POST',header:{'Content-Type': 'application/x-www-form-urlencoded'},data: {file_name: file_name,file_type: file_type},success: (res) => {console.log(res.data)resolve(res.data)}})}).then(res=>{let policy = res.Policy;let signature = res.Signature;let ak = res.Accesskeyid;console.log(policy)uni.uploadFile({url: 'https://***.obs.cn-north-4.myhuaweicloud.com',  //用你自己的 bucket 名替换星号filePath: file_path,name: 'file',formData: {'key': file_name,'AccessKeyId': ak,'Policy': policy,'x-obs-acl': 'public-read','content-type': file_type,'Signature': signature},success:(res)=>{console.log(res);}})}) ```4. 获取上传后的文件路径：
OBS 默认不返回上传成功的路径，那该怎么办？其实很简单，存储在 OBS 的文件都有规律，通过以下方法可以拼接：
obs_url = 'https://***.obs.cn-north-4.myhuaweicloud.com/' + _this.key;  //用你自己的 bucket 名替换星号5. 视频直传测试（华为云，阿里云，unicloud 大PK）：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210202191236848.png)

PHP后端生成签名后uniapp前端直传华为云OBS记录相关推荐

前端直传华为云OBS
本文是用前端将图片直传华为云OBS,可供参考.(比较好的方式是建议使用后台生成签名认证方式上传) 1.在华为云开通OBS对象存储 2.下载js sdk引入项目中 3. 首先创建实例 // 创建ObsC ...
uniapp vue 微信小程序前端直传华为云对象存储OBS
前言: 因项目服务器性能需要需要前端直传华为云对象存储绕过后端个人在华为云官网SDK文档研究分享出来避免大家踩坑报错定位 web端报 Error: Network Error 高频问 ...
uniapp 上传图片到华为云obs
记录一下用uniapp上传图片到华为云obs,之前是先把文件传到我们自己的服务器,然后后端的同事再上传到obs,但是我们公司的带宽太低了,传的太太太太慢了,于是考虑直接让用户上传到obs,不经过我们自 ...
前端js华为云obs上传下载文件与进度条的设置
前端js华为云obs上传下载文件与进度条的设置首先下载OBS BrowserJS SDK安装包用git将代码拉到本地 git clone https://github.com/huaweiclou ...
前端js华为云obs断点续传上传
前端js华为云obs断点续传上传断点续传上传就是将待上传的文件分成若干份分别上传,并实时地将每段上传结果统一记录在断点续传记录对象中,仅当所有分段都上传成功时返回上传成功的结果,否则在回调函数中返回 ...
后疫情时代，华为云会议如何定义未来会议？
摘要:有着超过20年视频会议产品研发经验的华为云会议来说,华为做的视频会议系统有点不一样. 疫情过后,火了什么?视频会议系统! 不可否认,疫情让很多人知道了视频会议,并在相当长的一段时间成为了我们工作 ...
java后端生成图形验证码、前端接收并展示
工具类 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2 ...
记录uniapp使用华为云obs上传图片视频
1:去华为云官网下载 OBS BrowserJS SDK 华为云 2:项目中引入sdk文件 import ObsClient from '../../utils/esdk-obs-browserj ...
华为云内容审核API调用前端 js uni-app
文章目录前言一.华为云的内容审核api的调用需要哪些东西? 二.使用步骤 1.先注册一个华为云的账号 2.申请内容审核服务 3.[华为云内容审核API的官方文档](https://support. ...

PHP后端生成签名后uniapp前端直传华为云OBS记录

PHP后端生成签名后uniapp前端直传华为云OBS记录相关推荐

最新文章

热门文章