上传图片到腾讯云主要有两个步骤：
1、鉴权 2、开始上传
需要引入两个JS文件：cos-js-sdk-v5.min.js和jquery-2.1.4.min.js，这两个文件的链接我已放在后面。
鉴权可以直接使用SecretId和SecretKey生成cos对象，但把SecretId和SecretKey暴露在前端页面这样不太安全，我们采用从服务端申请临时秘钥的方式生成cos对象。上传成功后的图片链接也可以通过域名+自定义key拼接生成，如下。
前端页面全部代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>腾讯云COS图片上传</title><script type="text/javascript" src="jquery-2.1.4.min.js"></script><script type="text/javascript" src="cos-js-sdk-v5.min.js"></script></head><body><input type="file" accept="image/*" id="file_upload" value="" multiple/><div class="image_container"><img id="preview" style="height:130px;width:117px;border-width:0px;"/></div></body><script>//腾讯云对象存储var cos = new COS({// 必选参数getAuthorization: function (options, callback) {$.ajax({method: 'GET',url: 'http://localhost:8080/shortTimeSignatureSDK',beforeSend: function (xhr) {xhr.setRequestHeader('Content-Type', 'application/json');},dataType: 'json',success: function (data) {var credentials = data && data.credentials;if (!data || !credentials) return console.error('credentials invalid');callback({TmpSecretId: credentials.tmpSecretId,TmpSecretKey: credentials.tmpSecretKey,XCosSecurityToken: credentials.sessionToken,// 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误StartTime: data.startTime, // 时间戳，单位秒，如：1580000000ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900});}});}});function checkImage(file) {const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';const isLt1M = file.size / 1024 / 1024 < 1;if (!isIMAGE) {alert('上传文件只能是图片格式!')}if (!isLt1M) {alert('上传文件大小不能超过 1MB!')}return isIMAGE && isLt1M}const domainUrl = "https://live-cover-picture-1256967716.cos.ap-/"$(function () {$("#file_upload").change(function () {var $file = $(this);var fileObj = $file[0];var imgList = []var windowURL = window.URL || window.webkitURL;var dataURL;var $img = $("#preview");//图片预览if (fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);$img.attr('src', dataURL);} else {dataURL = $file.val();var imgObj = document.getElementById("preview");imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}// let fileObject = fileObj.files[0]let timestamp, imgTmp, key;for (i = 0; i < fileObj.files.length; i++) {timestamp = (new Date()).getTime()imgTmp = fileObj.files[i]if (checkImage(imgTmp)) {cos.putObject({Bucket: 'live-cover-picture-1256967716',Region: 'ap-chengdu',Key: timestamp .toString(), /* 必须 */StorageClass: 'STANDARD',Body: imgTmp, // 上传文件对象onProgress: function (progressData) {console.log(JSON.stringify(progressData));}}, function (err, data) {console.log(err || data);console.log("上传成功的图片链接为："+(domainUrl+timestamp.toString()))});} else {alert("上传文件格式错误")}}});});</script></html>
其中生成cos对象请求生成临时秘钥的接口http://localhost:8080/shortTimeSignatureSDK的后端代码如下：
注意将下面的secretId和secretKey换成自己的。
@RequestMapping(value = "/shortTimeSignatureSDK", method = RequestMethod.GET)@ResponseBodypublic String getShortTimeSignatureSDK() {TreeMap<String, Object> config = new TreeMap<String, Object>();try {// 云 API 密钥 secretIdconfig.put("secretId", "换成自己的secretId");//// 云 API 密钥 secretKeyconfig.put("secretKey", "换成自己的secretKey");////若需要设置网络代理，则可以如下设置// if (properties.containsKey("https.proxyHost")) {//System.setProperty("https.proxyHost", properties.getProperty("https.proxyHost"));//System.setProperty("https.proxyPort", properties.getProperty("https.proxyPort"));// }// 临时密钥有效时长，单位是秒config.put("durationSeconds", 1800);// 换成你的 bucketconfig.put("bucket", "live-cover-picture-1256967716");//ad-picture-1256967716// 换成 bucket 所在地区config.put("region", "ap-chengdu");config.put("allowPrefix", "*");// 密钥的权限列表。简单上传和分片需要以下的权限，其他权限列表请看 /document/product/436/31923String[] allowActions = new String[]{// 简单上传"name/cos:PutObject",// 表单上传"name/cos:PostObject",//// 分片上传： 初始化分片//"name/cos:InitiateMultipartUpload",//// 分片上传： 查询 bucket 中未完成分片上传的UploadId//"name/cos:ListMultipartUploads",//// 分片上传： 查询已上传的分片//"name/cos:ListParts",//// 分片上传： 上传分片块//"name/cos:UploadPart",//// 分片上传： 完成分片上传//"name/cos:CompleteMultipartUpload"};config.put("allowActions", allowActions);// 请求临时密钥信息org.json.JSONObject credential = CosStsClient.getCredential(config);// 请求成功：打印对应的临时密钥信息System.out.println(credential.toString(4));return credential.toString();} catch (Exception e) {// 请求失败，抛出异常throw new IllegalArgumentException("no valid secret !");}}
上面需要的引入的js文件和源代码地址。
