前言:
因项目服务器性能需要 需要前端直传华为云对象存储 绕过后端 个人在华为云官网SDK文档研究 分享出来 避免大家踩坑
报错定位
web端 报 Error: Network Error 高频问题汇总_对象存储服务 OBS_BrowserJS_问题定位_华为云
上传的状态码 错误定位 状态码_对象存储服务 OBS_API参考_附录_华为云
错误码 原因定位 错误码_对象存储服务 OBS_API参考_附录_华为云
跨域配置
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