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('/').lengthconsole.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.tempFilePaththat.picPathList=picPathListconsole.log(1111,that.newPicPathList)var num=res.tempFilePath.split('/').lengthvar 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.keyvar policy=res.data.policyvar signature=res.data.signaturevar 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~

uniapp 上传图片到华为云obs相关推荐

PHP后端生成签名后uniapp前端直传华为云OBS记录
uniapp 官方合作的云存储是阿里云和腾讯云,但我们公司选的云存储服务恰好都不是这两家,是华为云 OBS.网上搜了多次,没有能成功的案例分享.但是,考虑到网上关于华为云性能优异的测评报告,以及我对华 ...
cdn加速华为云obs桶文件配置过程（详细）
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. 前言前面写了一篇文章,jeecg-boot中上传图片到华为云obs云存储中主要介绍了下,如何使用jeect-boot微服务将文件上传至obs中 ...
华为云OBS文件上传下载工具类
Java-华为云OBS文件上传下载工具类文章目录 Java-华为云OBS文件上传下载工具类 1.华为云obs文件上传下载 2.文件流转MultipartFile 3.File转换为Multipart ...
react+Ts+批量上传华为云OBS
文章目录前言一.华为云OBS 二.开发步骤 1.使用npm安装(推荐) 2.使用源码安装 3.直接上代码(npm方式) 4.示例图 5.12.22 新增进度条优化 6.如果限制单个大文件上传进度条 ...
前端直传华为云OBS
本文是用前端将图片直传华为云OBS,可供参考.(比较好的方式是建议使用后台生成签名认证方式上传) 1.在华为云开通OBS对象存储 2.下载js sdk引入项目中 3. 首先创建实例 // 创建ObsC ...
SpringBoot整合华为云OBS
一.参考项华为云 OBS(官网): 对象存储服务OBS官网_海量安全高可靠_数据云存储解决方案-华为云 OBS SDK for Java(官网): SDK下载_对象存储服务 OBS_Java_华为云 ...
sscom串口网络数据调试器使用post方法向华为云obs桶上传文件和图片
原贴地址:sscom串口网络数据调试器使用post方法向华为云obs桶上传文件和图片-云社区-华为云 [摘要] 之前发了文章"postman使用post方法向华为云obs桶上传文件和图片&q ...
前端js华为云obs断点续传上传
前端js华为云obs断点续传上传断点续传上传就是将待上传的文件分成若干份分别上传,并实时地将每段上传结果统一记录在断点续传记录对象中,仅当所有分段都上传成功时返回上传成功的结果,否则在回调函数中返回 ...
华为云OBS文件服务
华为云OBS文件服务准备工作先获取OBS的SK,AK,终端节点.然后创建桶将以上四个值存放在Nacos中 /*** 取值为所创建的桶名*/@Value("${obs.bucketNam ...

uniapp 上传图片到华为云obs

uniapp 上传图片到华为云obs相关推荐

最新文章

热门文章