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