uni-app上传图片到腾讯云（对象存储）

客户端，先从后端请求到上传的链接，再直接上传图片到腾讯云的对象存储。

1、文件base-util.js的内容：

function chooseImageFromSys(successCb, failCb, sizeType) {if (undefined == sizeType) {sizeType = ["original", "compressed"];}uni.chooseImage({count: 1, //默认是9。sizeType: sizeType, //可以指定是原图还是压缩图，默认二者都有。sourceType: ["album", "camera"], //album从相册选图，camera使用相机，默认二者都有。success(res) {console.log("获取本地图片成功", JSON.stringify(res));if (successCb) {successCb(res);}},fail(error) {console.log("获取本地图片失败", error);if (failCb) {failCb(error);}}});
}function uploadImageToTencentCloudWithData(imgData, successCb, failCb) {//其中的url是从后端请求回来的。uni.request({url: "https://cjh-1305035994.cos.ap-shanghai.myqcloud.com/test.jpg?q-sign-algorithm=sha1&q-ak=AKIDrUt3waYdlcFrVje2FBUcW5bv8qJXrnP5&q-sign-time=1614655763;1614664763&q-key-time=1614655763;1614664763&q-header-list=content-type&q-url-param-list=&q-signature=d7418d6fa1dd2ff4d72ef265698e2d0cba26ac29",method: "PUT",data: imgData,header: {"content-type": 'image/jpeg;image/jpg;image/png;image/gif'},success: function(res) {if (200 == res.statusCode) {console.log("上传图片成功", JSON.stringify(res));} else {console.log("上传图片失败", JSON.stringify(res));}},fail: function(error) {console.log("上传图片请求失败", error);}});
}// 上传图片到后端的腾讯云服务器。
function uploadImageToTencentCloud(imgFilePath, successCb, failCb) {// #ifdef MP-WEIXINuni.getFileSystemManager().readFile({filePath: imgFilePath,//encoding: 'base64',success: res => {uploadImageToTencentCloudWithData(res.data, successCb, failCb);},fail: function(error) {console.log("上传图片请求失败", error);if (failCb) {failCb(error);}}});// #endif// #ifdef APP-PLUSplus.io.resolveLocalFileSystemURL(imgFilePath, function(entry) {// 可通过entry对象操作test.html文件   entry.file(function(file) {var fileReader = new plus.io.FileReader();fileReader.onerror = function(e) { //读取文件出错。console.log("track_fr_onerror", e);};fileReader.onload = function(e) { //读取文件结束。console.log("track_fr_onload");uploadImageToTencentCloudWithData(e.target.result);}fileReader.onloadend = function(e) { //读取文件成功结束。console.log("track_fr_onloadend");};// fileReader.readAsText(file, 'utf-8');fileReader.readAsDataURL(file);// fileReader.readAsArrayBuffer(file); // 尽管后台使用此方法可行 但AppPlus暂时不支持此方法。});});// #endif
}module.exports = {chooseImageFromSys: chooseImageFromSys,uploadImageToTencentCloud: uploadImageToTencentCloud
}

2、调用的主要代码。

import baseUtil from "@/common/base-util.js";baseUtil.chooseImageFromSys(chooseRes => {baseUtil.uploadImageToTencentCloud(chooseRes.tempFilePaths[0]);
});

3、结果：

（1）在MP-WEIXIN(微信小程序)里面，是成功的；

（2）在AppPlus(iOS/Android)里面，虽然能上传成功，但是使用链接地址去获取的图片并不能正常显示出来（比如使用网页浏览器打开图片链接地址查看）。

uni-app上传图片到腾讯云相关推荐

微信小程序/网站上传图片到腾讯云COS
COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务.可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽消耗等.个人也可以通过腾讯云账号免费使 ...
图片上传成功但是图片显示不出来_小程序上传图片到腾讯云
这是小程序开发第二篇,主要介绍如何上传图片到腾讯云,之所以选择腾讯云,是因为腾讯云免费空间大准备工作上传图片主要是将图片上传到腾讯云对象存储(COS). 要使用对象存储 API,需要先执行以下步骤 ...
vue 上传图片到腾讯云对象存储
需求:上传图片到腾讯云对象存储,返回图片链接地址. 大概流程: 腾讯云对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储 ...
upload上传图片到腾讯云，如何上传图片
讲解一下如何上传图片到腾讯云,上传到其他第三方云盘操作也是大致一样的: 一:首先需要拥有一个账号(有的直接可以跳过看后面) 1.创建一个腾讯云账号,跟着提示操作即可(必须实名-为了安全),中间选择对 ...
使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景名词参考效果图展示开发步骤 1:概要步骤 2:上代码结束: 使用微信js sd ...
uniapp上传图片到腾讯云COS
使用第三方总是非常麻烦的,这里使用uniapp的条件编译,给大家带来微信小程序的上传图片以及H5的上传图片到腾讯云COS 毕竟文档很难看,由于进行了封装,在最后再显示完整代码首先解决H5的上传 ...
腾讯云服务器怎么搭建ssm项目,SSM 项目如何上传图片到腾讯云COS？
-------------------- 个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:[http://zwd596257180.gitee. ...
如何完成上传图片到腾讯云
这个是官方文档里面的属性, upload(params){ console.log(params) } 下面是参数打印出来的结果: 将图片上传到腾讯云: 1.安装依赖:npm i cos-js-sd ...
php上传图片（腾讯云对象存储）
public function cosPub(){ //引入腾讯云的文件 autoload.php'$secretId = ""; //"云 API 密钥 SecretI ...

uni-app上传图片到腾讯云

uni-app上传图片到腾讯云（对象存储）

uni-app上传图片到腾讯云相关推荐

最新文章

热门文章