微信小程序图片如何上传腾讯云

封装图片上传腾讯云的js

一、前期准备

1.到 (COS对象存储控制台)[https://console.cloud.tencent.com/cos4] 创建存储桶，得到 Bucket（存储桶名称） 和 Region（地域名称）
2.到 (控制台密钥管理)[https://console.cloud.tencent.com/capi] 获取您的项目 SecretId 和 SecretKey
3.把 demo/lib/cos-wx-sdk-v5.js 复制到自己小程序项目代码里，在需要上传文件的地方贴以下代码
腾讯云文件地址：https://github.com/tencentyun/cos-wx-sdk-v5

二、代码编写

1.把配置文件放在了全局common/config文件中，通过config.getCOS()的形式调用

2.services/UploadService中提供了一个后台给的获取签名的接口
封装上传文件，调用时直接在需要上传的页面引入

import config from '../common/config'
import COS from '../common/cos-wx-sdk-v5'
import UploadService from '../services/UploadService'
var cos = new COS({
	async getAuthorization(options, callback) {
		var res = await UploadService.cossts(config.getCOS().Bucket,config.getCOS().Region)
		var credentials = res.data.credentials
		callback({
			TmpSecretId: credentials.tmpSecretId,
			TmpSecretKey: credentials.tmpSecretKey,
			XCosSecurityToken: credentials.sessionToken, // 需要提供把 sessionToken 传给
			ExpiredTime: res.data.expiredTime,
			ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
		});
	},
});
export default {
	data() {
		return {
			imgInfo:{},//上传腾讯云 组装好的图片信息 整理成后台需要的格式
			img:{
				path:'',
				name :''
			},
		}
	},

	//上传腾讯云
	methods: {
		uploadImage() {
			var that = this
			uni.chooseImage({
				count: 1, // 默认9
				sizeType: ['original'], // 可以指定是原图还是压缩图，默认用原图
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					console.log(res)
					that.img={
						filepath :'/custom/invoice/',//规定图片需要上传至文件
						path : res.tempFiles[0].path,
						name : res.tempFiles[0].path.substr(res.tempFiles[0].path.lastIndexOf('/') + 1)//自定义图片名称
					}
				}
			});
		},
		upload(img,callback,value){
		//img:需要上传腾讯云的图片信息
		//callback:图片上传腾讯云完成后，需要执行的方法
		//value:执行callback方法是，除图片信息以外的参数
			var that = this;
			var res = img.filepath + img.name
			console.log(res)
			cos.postObject({
				Bucket: config.getCOS().Bucket,
				Region: config.getCOS().Region,
				Key:img.filepath + img.name,//图片上传的位置+图片名
				FilePath: img.path,
				onProgress: function(info) {
					console.log(JSON.stringify(info));
				}
			},function (err, data) {
              if (data.statusCode === 200) {
                that.imgUrl={
                  url:data.Location,
                  directory:img.filepath,
                  bucket:config.getCOS().Bucket,
                  key:img.name
                }
              //我们是以json字符串的形式传的，可以根据需要转化成别的样式
				 value.image = JSON.stringify(that.imgUrl)
				 callback(value);
              }
            });
		},
	//删除腾讯云图片的方法
		deleteFile(delInfo) {
			cos.deleteMultipleObject({
				Bucket: profile.COS.Bucket,
				Region: profile.COS.Region,
				Objects: delInfo
				//删除多张图片，可以把文件信息放在 如下数组中
				//   [{Key: "图片所在的文件夹+图片名",},
				//   {Key: "图片所在的文件夹+图片名",}, ]
			}, function(err, data) {
				console.log(err || data);
			});
		}
	}
}