uniapp vue 微信小程序前端直传华为云对象存储OBS

前言：

因项目服务器性能需要需要前端直传华为云对象存储绕过后端个人在华为云官网SDK文档研究分享出来避免大家踩坑

报错定位

web端报 Error: Network Error 高频问题汇总_对象存储服务 OBS_BrowserJS_问题定位_华为云

上传的状态码错误定位状态码_对象存储服务 OBS_API参考_附录_华为云

错误码原因定位错误码_对象存储服务 OBS_API参考_附录_华为云

跨域配置

1. 存储桶配置问题跨域访问-对象存储-腾讯云

2. 内容分发网络 CDN HTTP 响应头配置-配置指南-文档中心-腾讯云-腾讯云

3. 对象存储设置跨域访问-最佳实践-文档中心-腾讯云-腾讯云

基本配置

confing

//指定OBS服务相关信息：AK，SK，EndPoint
var Configuration = {AccessKeyId: '*** Provide your Access Key ***',       SecretKey: '*** Provide your Secret Key ***',       EndPoint : 'https://your-endpoint'
};module.exports = Configuration;

配置请求头formData 中的 Policy 和 Signature (附件）

//设定policy内容
const OBSPolicy = {   "expiration": '2022-04-28T14:58:43.879Z', // uniapp ios Android 端 必须为此格式"conditions": [{"bucket": "Bucket name"},        //Bucket name{ 'key': key} // 格式 'xx/a.jpg' 路径/名称.格式 (路径选填)]
}const policyEncoded = getPolicyEncode(OBSPolicy);                    //计算policy编码值
const signature = getSignature(policyEncoded, config.SecretKey);

注意：uniapp ios Android 端如果上传报403 Crypto文件中的 113行文件注释即可

上传

使用upload组件上传即可

let formData={'key': key,//地址和文件名'AccessKeyId': '*** Provide your Access Key ***', 'Policy': policyEncoded,  'Signature': signature
}
xxx.uploadFile({url:config.EndPoint,filePath: tempFilePath,//临时文件地址name: 'file',formData: formData,success: (res) => {console.log(res)},fail: (error) => {console.log(error)}
})

路径

华为云不返回文件地址自己手动拼接

let URL = Configuration.EndPoint + key

附件

文件太多需要百度云自提

链接: https://pan.baidu.com/s/1s6VRkqFrzk5_fazHtqAy8w 提取码: ia78

uniapp vue 微信小程序前端直传华为云对象存储OBS相关推荐

微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
微信小程序录音直传阿里云OSS并语音识别
前言如题:做一个录音文字识别功能,知识点有三个,分别是微信小程序的录音功能.录音文件直传阿里云OSS.使用阿里云的录音文件识别接口返回识别后的文字一.微信小程序录音官方文档:微信小程序全局唯一的 ...
华为云对象存储OBS，助力企业降本增效
信息化时代,互联网信息技术在企业发展中扮演着越来越重要的角色,对于网络信息数据的依赖程度也在不断提高.企业可以通过使用计算机进行信息管理,将各种资源有效利用起来.但是每天产生的大量数据信息,需要花费很 ...
华为云对象存储OBS，安全可靠的云存储服务，让企业轻松上云
随着时代的不断发展,不管是个人还是企业对数据的存储要求也越来越高,对于普通人来说,我们可以把文件.视频.图片等等存储到电脑.手机或者U盘等硬件设备中,但对于企业来说,庞大的数据量必须依靠专业的存储设备 ...
华为云对象存储OBS，为不同企业提供云存储方案，助力企业更好经营
我们正处于一个信息爆炸的时代,不管是日常通讯还是看视频玩游戏,只要是和网络相关的服务,就离不开数据的存储和读取,对于企业来说也是如此.企业的生产经营需要大量的数据支持,因此企业对于数据存储的要求也很高 ...
怎么把文件存进obs服务器,华为云对象存储 obs 文件流上传
2019-12-25 11:14:08 foolish 995 华为云对象存储 obs 文件流上传 /** * obs 二进制流上传 * * @return \Illuminate\Http\Json ...
uni-app +vue+微信小程序发布线上
通过HBuilder x里写 uni-app语言和vue 来做微信小程序,在微信开发者工具里来看效果图发布步骤 : 1.先在 HBuilde X开发工具 --找到导航栏里的发行---再选择小程序微 ...
基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计
开发技术:uniapp + vue + ElementUI + 微信小程序 + 安卓app + Springboot 开发工具环境:HBuilder + 微信开发者工具 + VsCode + Idea ...
基于uniapp+vue微信小程序的在职考研学习辅导系统
1系统具有良好的集成性,提供标准接口,以实现与其他相关系统的功能和数据集成.开放性好,便于系统的升级维护.以及与各种信息系统进行集成.功能定位充分考虑平台服务对象的需求. 一个微信小程序由.js..j ...

uniapp vue 微信小程序前端直传华为云对象存储OBS

前言：

报错定位

基本配置

上传

路径

附件

uniapp vue 微信小程序前端直传华为云对象存储OBS相关推荐

最新文章

热门文章

uniapp vue 微信小程序 前端 直传华为云对象存储OBS

前言：

报错定位

基本配置

上传

路径

附件

uniapp vue 微信小程序 前端 直传华为云对象存储OBS相关推荐

最新文章

热门文章

uniapp vue 微信小程序前端直传华为云对象存储OBS

uniapp vue 微信小程序前端直传华为云对象存储OBS相关推荐