uniapp 上传图片到华为云obs

最新推荐文章于 2024-09-26 10:54:16 发布

_木小夕_

最新推荐文章于 2024-09-26 10:54:16 发布

阅读量2.7k

点赞数 3

文章标签：前端 uni-app obs

本文链接：https://blog.youkuaiyun.com/bo_gu/article/details/122167440

版权

本文档记录了使用uniapp通过后端获取签名的方式直接上传图片到华为云OBS的过程，避免因公司带宽限制导致的上传速度慢问题。在尝试前端直接获取签名失败后，选择将文件名和类型发送给后端，由后端生成必要的签名信息，包括key、AccessKeyId、Policy等，然后前端使用这些信息通过uniapp的uploadFile接口上传图片。最后，图片的地址为设置的baseURL加上从后端获取的key。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下用uniapp上传图片到华为云obs，之前是先把文件传到我们自己的服务器，然后后端的同事再上传到obs，但是我们公司的带宽太低了，传的太太太太慢了，于是考虑直接让用户上传到obs，不经过我们自己的服务器，这样能稍微快一点。
那么现在问题来了，obs的文档，前端（小程序）获取签名直传，都需要引入BrowserJS，但是不知道为什么，我用uniapp死活引入不成功，不是文件报错，就是无法创建ObsClient对象，一整个无语住了，生成工单问华为云工程师，得到的回复也只是uniapp还没适配，简直了。。。。。。而且前端获取签名ak这些还是比较有风险的在这里插入图片描述
所以最后采用后端生成签名，前端上传的方法。
首先选择、压缩好图片（根据需求选择压缩）之后，把文件名和文件类型传给后端，后端同事需要根据这两个参数，获取签名，生成’key’、‘AccessKeyId’、‘Policy’、‘x-obs-acl’、‘content-type’、‘Signature’；
之后前端根据这几个参数，访问自己的obs上传地址，就可以上传图片啦。

// 从相册选择图
					uni.chooseImage({
   
						count: count,
						sizeType: ['compressed'],
						success: function(res) {
   
							uni.showLoading({
   
							    title: '上传中'
							});
							that.picList.push(res.tempFiles[0])
							var num=res.tempFilePaths[0].split('/').length
							console.log(res.tempFilePaths[0].