uniapp上传图片到腾讯云COS

使用第三方总是非常麻烦的，这里使用uniapp的条件编译，给大家带来 微信小程序的上传图片以及H5的上传图片 到腾讯云COS

毕竟文档很难看，由于进行了封装，在最后再显示完整代码

首先解决H5的上传

我这里看的文档是
链接: https://cloud.tencent.com/document/product/436/64960

使用的是putObject，准备好以下数据Bucket和Region，以及创建一个cos对象，这些数据如果是自己创建的存储桶都知道的，不是自己创建的找后端或者项目经理拿

// #ifdef H5
import COS from 'cos-js-sdk-v5';
// #endif
// #ifdef MP-WEIXIN
import COS from 'cos-wx-sdk-v5'
// #endif
const Bucket = ""; /* 填入您自己的存储桶，必须字段 */
const Region = ''; /* 存储桶所在地域，例如ap-beijing，必须字段 */
const cos = new COS({SecretId: '',SecretKey: '',
})

1.在选完图片之后，先看看返回来的数据是什么格式的

使用putObject进行上传，但是，这个Api要求传入的文件是File对象或者Blob对象

别问我为什么支持字符串不用字符串，问就是试过，但不行，还是老老实实转File对象和Blob对象吧

如果返回来的数据格式是以上两种中的一种，那皆大欢喜，不是就用以下方法转

(a)如果是`base64转Blob对象` 用以下方法：

// base64转blob
function parseBlob(dataurl) {var arr = dataurl.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}

(b)如果是`Blob Url(Blob的string)`转File对象用以下方法：

function parseFile(src,name) {let that = thisreturn new Promise((resolve, reject) => {let xhr = new XMLHttpRequest()xhr.open('GET', src, true)xhr.responseType = 'blob'xhr.onload = function (e) {if (this.status == 200) {let myBlob = this.responselet files = new window.File([myBlob],name,{ type: myBlob.type }) // myBlob.type 自定义文件名resolve(files)} else {reject(false)}}xhr.send()})
}

2.上传

我这里返回来的是base64，就用(a)方法了，点击上传，我这里是自己传的一个文件名，如：xxx.jpg

// 随机生成字符串做名字
function getRandomString(len,type){let _charStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',min = 0, max = _charStr.length-1, _str = '';                    //定义随机字符串 变量//判断是否指定长度，否则默认长度为15len = len || 15;//循环生成字符串for(var i = 0, index; i < len; i++){index = (function(randomIndexFunc, i){         return randomIndexFunc(min, max, i, randomIndexFunc);})(function(min, max, i, _self){let indexTemp = Math.floor(Math.random()*(max-min+1)+min),numStart = _charStr.length - 10;if(i==0&&indexTemp >=numStart){indexTemp = _self(min, max, i, _self);}return indexTemp;}, i);_str += _charStr[index];}return _str + '.' + type
},
//H5上传
function h5UploadFile(blob,fileName) {//上传图片return new Promise(function(resolve, reject) {cos.putObject({Bucket: Bucket, Region: Region,  Key: `/image/${fileName}`,Body: blob,}, function(err, data) {//data里有返回来的图片地址数据console.log(err || data);resolve(data.Location)});})
},
uploadImage(event) {//event.url 是我要上传到腾讯云的临时地址let blob = parseBlob(event.url)//图片格式如 pngconst imageType = blob.type.split('/')[1]; //生成名字如 asdahfskjh.pnglet fileName = getRandomString(30,imageType)//这里result就是返回来的上传到腾讯云后的图片地址const result = await h5UploadFile(blob,fileName);
}

然后是小程序上传

小程序上传其实更为简单，使用的是postObject，Bucket、region和cos对象都和H5一致，只需要一个方法就行，不需要转File对象或者Blob对象

 function wxUploadFile(filePath,fileName) {return new Promise(function(resolve, reject) {cos.postObject({Bucket: Bucket, /* 必须 */Region: Region,    /* 必须 */Key:  `/image/${fileName}`,              /* 必须 */FilePath: filePath,onProgress: function (info) {console.log("[cos.postObject-seccess]",JSON.stringify(info));} }, function(err, data) {console.log("[cos.postObject-err]",err || data);resolve(data.headers.location)});})
},
uploadImage(event) {//event.url 是我要上传到腾讯云的临时地址let filePath = event.url;let fileName = filePath.substr(filePath.lastIndexOf('/') + 1);const result = await wxUploadFile(filePath,fileName)
}

3.完整代码如下

把上传所需要的方法封装成一个JS文件：attachment.js，方便后续使用
attachment.js

// #ifdef H5
import COS from 'cos-js-sdk-v5';
// #endif
// #ifdef MP-WEIXIN
import COS from 'cos-wx-sdk-v5'
// #endifconst Bucket = ""; /* 填入您自己的存储桶，必须字段 */
const Region = ''; /* 存储桶所在地域，例如ap-beijing，必须字段 */
const cos = new COS({SecretId: '',SecretKey: '',
})// #ifdef H5
export function h5UploadFile(blob,fileName) {//上传图片return new Promise(function(resolve, reject) {cos.putObject({Bucket: Bucket, Region: Region,  Key: `/image/${fileName}`,Body: blob,}, function(err, data) {console.log(err || data);resolve(data.Location)});})
}// base64转blob
export function parseBlob(dataurl) {var arr = dataurl.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}// 随机生成字符串做名字
export function getRandomString(len,type){let _charStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',min = 0, max = _charStr.length-1, _str = '';  //定义随机字符串 变量//判断是否指定长度，否则默认长度为15len = len || 15;//循环生成字符串for(var i = 0, index; i < len; i++){index = (function(randomIndexFunc, i){         return randomIndexFunc(min, max, i, randomIndexFunc);})(function(min, max, i, _self){let indexTemp = Math.floor(Math.random()*(max-min+1)+min),numStart = _charStr.length - 10;if(i==0&&indexTemp >=numStart){indexTemp = _self(min, max, i, _self);}return indexTemp;}, i);_str += _charStr[index];}return _str + '.' + type
}//bolburl转file
export function parseFile(src,name) {let that = thisreturn new Promise((resolve, reject) => {let xhr = new XMLHttpRequest()xhr.open('GET', src, true)xhr.responseType = 'blob'xhr.onload = function (e) {if (this.status == 200) {let myBlob = this.responselet files = new window.File([myBlob],name,{ type: myBlob.type }) // myBlob.type 自定义文件名resolve(files)} else {reject(false)}}xhr.send()})
}
// #endif// #ifdef MP-WEIXIN
export function wxUploadFile(filePath,fileName) {return new Promise(function(resolve, reject) {cos.postObject({Bucket: Bucket, /* 必须 */Region: Region,    /* 必须 */Key:  `/image/${fileName}`,  /* 必须 */FilePath: filePath,onProgress: function (info) {console.log("[cos.postObject-seccess]",JSON.stringify(info));} }, function(err, data) {console.log("[cos.postObject-err]",err || data);resolve(data.headers.location)});})
}
// #endif

使用的页面的methods：

// 上传图片
import {h5UploadFile,wxUploadFile,parseBlob,getRandomString} from '@/api/attachment.js'
export deafault {methods: {async uploadImage(event) {// 将图片上传到腾讯云// #ifdef H5let blob = parseBlob(event.url)const imageType = blob.type.split('/')[1];let fileName = getRandomString(30,imageType)const result = await h5UploadFile(blob,fileName);// #endif// #ifdef MP-WEIXINlet filePath = event.url;let fileName = filePath.substr(filePath.lastIndexOf('/') + 1);const result = await wxUploadFile(filePath,fileName)// #endif}}
}

最后，其实那个fileName随你们自己定义，这个没有那么重要，拿到result之后自己复制到浏览器看看能不能查看，能查看就是上传成功了。