uniapp 上传图片到华为云obs

记录一下用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].split('/')[num-1])
							var filename=res.tempFilePaths[0].split('/')[num-1]
							var contentType='image/'+filename.split('.')[1]
							//文件类型为image/jpg  image/png之类的  


							//压缩图片							
							uni.compressImage({
							  src: res.tempFilePaths[0],
							  quality: 50,
							  success: res => {
								console.log(res)
							    console.log(res.tempFilePath.split('/').length)							
								var picPathList=res.tempFilePath
								that.picPathList=picPathList
								console.log(1111,that.newPicPathList)
								var num=res.tempFilePath.split('/').length
								var fileNamenew=res.tempFilePath.split('/')[num-1]
								var fileName=fileNamenew+filename.split('.')[1]
								//压缩后的临时图片名

								var token = uni.getStorageSync("token")
								var data={
									fileName:fileName,
									contentType:contentType
								}
								console.log(data)
								console.log('压缩之后',that.cart)
								uni.request({
								    url: '这里访问后端的接口', 
									method:'GET',
									data:data,
									header:{
										'accessToken': token
									},
								    success: (res) => {
								        console.log(111,res.data.key);	
										var key=res.data.key
										var policy=res.data.policy
										var signature=res.data.signature
										var ak=res.data.ak	
										var formData={
											'key': key,//地址和文件名
											'AccessKeyId': ak,  //获取ak
											'Policy': policy,  //获取后端生成的policy
											'x-obs-acl': 'public-read',  //设置为公共读
											'content-type': contentType,  //文件类型
											'Signature': signature //获取后端生成的signature 
										}
										console.log(formData)
										console.log('获取信息',that.cart)
										uni.uploadFile({
											url:'https://这里换成桶名.obs.cn-east-2.myhuaweicloud.com/',
											filePath: that.picPathList,//临时文件地址
											name: 'file',
											formData: formData,
											success: (res) => {
												that.imgs =key 
												console.log(1111111)
												uni.hideLoading();
											},
											fail: (error) => {
												console.log(error)
											}
										})
								    }
								});
								
							  }
							})															
						}
					});

最后图片的地址,就是自己设置的baseURL+获取的key~

你可能感兴趣的:(前端,uni-app,obs)