uniapp 上传图片到华为云obs
记录一下用uniapp上传图片到华为云obs,之前是先把文件传到我们自己的服务器,然后后端的同事再上传到obs,但是我们公司的带宽太低了,传的太太太太慢了,于是考虑直接让用户上传到obs,不经过我们自己的服务器,这样能稍微快一点。那么现在问题来了,obs的文档,前端(小程序)获取签名直传,都需要引入BrowserJS,但是不知道为什么,我用uniapp死活引入不成功,不是文件报错,就是无法创建Ob
·
记录一下用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~
更多推荐
已为社区贡献4条内容
所有评论(0)