场景:因为业务需要采用的是前端自己生成签名来上传图片(私认为,还是采用官方的方式上传图片最佳)
1、config.js 配置 (这个文件用来装自己的存储桶,地域,密钥信息即可)
var config = { Bucket:'存储桶的名字', Region:'地域名字', SecretId:'密钥id值', SecretKey:'密钥key值' } module.exports = config
2、实现上传功能( 这里的代码是哪个地方需要上传图片,就写到哪个界面中即可 )
var COS = require('../../utils/cos-wx-sdk-v5');// 这个是cos上传的sdk var config = require('../../utils/config');//这两个文件我是放在utils里面的 , 这个config文件 就是步骤一中的内容 var cos = new COS({ getAuthorization:function(params,callback){ var authorization = COS.getAuthorization({ SecretId:config.SecretId, SecretKey:config.SecretKey, Method:params.Method, Key:params,Key }); callback(authorization); } })
page({
//上传用户头像
uploadHeadImage:function(){
let that = this;
wx.chooseImage({
count:1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
var filePath = res.tempFilePaths[0];//获取文件路径
var Key = filePath.substr(filePath.lastIndexOf('/')+1);//这里指定上传的文件名
var dateObj = new Date();
var timestamp = dataObj.getTime();
var nowDate = dateObj.toLocaleDateString();
var formatDate = nowDate.replace(///g,'-');//格式斜杠日期
var newKey = formatDate +'/'+timestamp+Key;//cos上定义目录
var tempObj = {};
tempObj.imgLocation = 'https://' + config.Bucket +'.cos.' + config.Region + '.myqcloud.com/'+newKey;//返回上传的绝对 URL
//SDK 提供的cos上传函数,如果想批量上传,可以在这里加上for循环。
cos.postObject({
Bucket:config.Bucket,//存储桶名称
Region:config.Region,//地域名字
Key:newKey,
FilePath:filePath,//本地文件临时地址
},function(err,data){
if(err){
wx.showModal({
title:'返回错误',
content:'请求失败'+err,
showCancel:false
})
}else{
if(data){
//data.headers.Location 这里是返回的图片URL,这里可以为界面中需要显示的图片src赋值
that.setData({
headImage:data.headers.Location
})
}
}
})
}
})
}
})
3、重点来了
//上面的代码可以使用了,但是,但是,但是,小程序的域名配置一定不要忘记 配置请求cos这个接口的域名。
//比如说: 我们的存储桶名字是 upload-headimg-123456
//那么小程序的域名配置就是这样子的 https://upload-headimg-123456.cos.ap.chengdu.myqcloud.com/ (因为是地域是成都的,所以是 ap-chengdu )
//还有就是,如果上传的存储桶有多个,那么,小程序的域名配置就要配置多个。
//所以,这就是劣势。
//如果想要前端来上传图片到腾讯云,密钥放在前端,后端不做任何参与的话,这是最快的方式。但这也是最值得不推荐的方式!!!
4、忘记了一点(就是关于小程序上传图片,讲道理的话 wx.chooseImage({}) 应该和 wx.uploadFile({}) 一起使用的呢,代码如下)
//比如点击图片触发 wx.chooseImage({})
wx.chooseImage({
count:1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
let tempFilePath = res.tempFiilePaths[0];//比如说这里获取到了上传文件的临时地址
//讲道理的话,如果想要把图片上传到自己服务器哈
wx.uploadFile({
url:'自己服务器的图片上传地址',
filePath:tempFilePath,//文件的临时地址
name:'uploadFile',
success:function(res){
//上传成功后,自己服务器地址会返回一个图片值,然后就可以操作了耶,do something。
}
})
}
})
参考链接: https://my.oschina.net/u/2456768/blog/1811775
参考链接: https://blog.csdn.net/weixin_34043301/article/details/88993437
参考链接:https://github.com/tencentyun/cos-wx-sdk-v5/tree/master/demo/lib (获取 cos-wx-sdk-v5.js 还有demo喔)
官网小程序直传实践demo链接: https://cloud.tencent.com/document/product/436/34929 (强烈安利这种上传图片的方式耶)