微信小程序/网站 上传图片到腾讯云COS

cos简介: 腾讯云提供的一种对象存储服务，供开发者存储海量文件的分布式存储服务。可以将自己开发的应用的存储部分全部接入COS的存储桶中，有效减少应用服务器的带宽，请求等。个人也可以通过腾讯云账号免费使用COS6个月，https://cloud.tencent.com/product/cos

整体流程简介:

1. 前端引入cos的SDK文件

2. 监听上传控件，并在图片加载至网页临时流中发起签名请求

3.后端根据上传的请求方式和路径参数返回签名Authorization和token XCosSecurityToken

4.前端再根据返回的参数和SDK以3的请求方式上传图片。

PHP签名返回流程:

1.在腾讯云的建好存储桶并配置CORS规则https://cloud.tencent.com/document/product/436/11459

2.在平台上拿到Bucket(存储桶)，Region(地域)，SecretId，SecretKey等参数。

3.使用(SecretId,Timestamp…)参数进行签名通过腾讯云的接口获取临时密钥，返回给前端的token也在临时密钥中

4.根据前端传的(上传请求方式，路径)和临时密钥进行签名(前端上传所使用的)并返回。

一、PHP获取签名部分(tp5)
1024*1024*2) {\t\t// 限制图片大小2M
\t\tlayer.open({content: '上传的图片不能超过 2MB',skin: 'msg',time: 3 });
\t\t//tipPopup("上传的图片不能超过 2MB",1100,3);
\t\treturn;
\t}
\tif(file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/gif') {\t\t// 限制图片格式
\t\tlayer.open({content: '上传图片的格式不正确',skin: 'msg',time: 3 });
\t\t//tipPopup("上传图片的格式不正确",1100,3);
\t\treturn;
\t}
\t// 检测文件名不能含有中文汉字
\tif(escape(file.name).indexOf('%u') != -1) {
\t\tlayer.open({content: '上传的文件名有中文，请重新上传',skin: 'msg',time: 3 });
\t\treturn;
\t}
\tvar dirBase = 'temp2018/';
\tvar myDate = new Date();
\tvar reg = new RegExp( '/' , "g" );
\t// var specilReg = /[@#\\$\\!()%-~+\\^&\\s*]+/g;;\t// 过滤文件名的特殊字符
\t// var fileName = file.name.replace(specilReg,'');
\tvar files = (myDate.toLocaleDateString()).replace(reg,"")+'/'+myDate.getTime()+'_'+parseInt(Math.random()*100000)+'_'+file.name;
var Key = dirBase+ files; // 这里指定上传目录和文件名

// 执行获取签名函数，拿到签名通过回调上传
getAuthorization({Method: 'POST', Key: Key}, function (err, info) {
\t
var fd = new FormData();
fd.append('key', Key);
fd.append('Signature', info.Authorization);
fd.append('Content-Type', '');
info.XCosSecurityToken && fd.append('x-cos-security-token', info.XCosSecurityToken);
fd.append('file', file);
var url = prefix;
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function () {
if (Math.floor(xhr.status / 100) === 2) {
var ETag = xhr.getResponseHeader('etag');
callback(null, {url: url+Key, ETag: ETag});
}else {
callback('文件 ' + Key + ' 上传失败，状态码：' + xhr.status);
}
};
xhr.onerror = function () {
callback('文件 ' + Key + ' 上传失败，请检查是否没配置 CORS 跨域规则');
};
$("#preImg").html("").append('上传中……');
xhr.send(fd);
});
};

----------------------------------------------------------------------------------------------------------

三、微信小程序上传方式

这里小程序就演示直接自己生成签名，然后通过cos的SDK提供的函数上传。

1.config.js 单独配置
var config = {
Bucket: 'busin-1256537792',//存储桶
Region: 'ap-guangzhou',//地域
SecretId: 'AKIDTtR************XiiW8nLLlp39yl4LW',
SecretKey: 'hslO1YxFNJ5lGh0yR7c4Qemi8VhPRhmf', //replace with yours
}
module.exports = config

2.实现上传功能
/*
*author: fuchao
*date: 2018-04-27
*desc: 小程序本地签名上传图片到腾讯云cos
*个人公众号: ZEROFC_DEV
**/
// 同样需要先引入COS的SDK，和配置文件
var COS = require('../../lib/cos-wx-sdk-v5');
var config = require('./config');
// 实例COS
var cos = new COS({
getAuthorization: function (params, callback) {\t//获取签名
var authorization = COS.getAuthorization({
SecretId: config.SecretId,
SecretKey: config.SecretKey,
Method: params.Method,
Key: params.Key
});
callback(authorization);
}
});
Page({
data: {
list: [],
},
simpleUpload: function() {
// 选择文件
wx.chooseImage({
count: 4, // 默认9
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 = dateObj.getTime();
var nowDate = dateObj.toLocaleDateString();
var formatDate = nowDate.replace(/\\//g,"-"); // 格式斜杠日期
console.log(formatDate);
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, // 本地文件临时地址
// onProgress: function (info) { // 上传时基本信息
// console.log(JSON.stringify(info));
// }
},requestCallback(null,tempObj));
}
})
},
});
// 上传图片回调函数
var requestCallback = function (err, data) {
console.log(err || data);
if (err && err.error) {
wx.showModal({ title: '返回错误', content: '请求失败：' + err.error.Message + '；状态码：' + err.statusCode, showCancel: false });
} else if (err) {
wx.showModal({ title: '请求出错', content: '请求出错：' + err + '；状态码：' + err.statusCode, showCancel: false });
} else {
console.log(data);
wx.showToast({ title: '请求成功', icon: 'success', duration: 3000 });
}
};

个人避坑解决方案

原因：开始上传图片到cos的项目我是用TP3.2做的，但是上传到linux且高版本的php服务器上，发现我那个生成签名的php竟然报500错误，而我本地是windows且php版本低于5.5一切都很正常。至于是什么原因，我也没时间去解决，只能把生成签名的php文件改成tp5.0的放在另一个项目中，而我就以跨域的方式去请求签名。

1.php文件修改
// 增加跨域响应头
header('Content-Type: application/json');
header('Allow-Control-Allow-Origin: *'); // 这里修改允许跨域访问的网站
header('Allow-Control-Allow-Headers: origin,accept,content-type');
// 增加前端jsonp参数
$callback = input('callback') ? input('callback') : '';
// 以回调函数返回签名到前端
echo $callback . '(' . json_encode($data) . ')';

2.js部分修改(主要改成跨域请求签名)
// 计算签名
var getAuthorization = function (options, callback) {
var baseUrl = $("#cosurl").attr("urls");
var url = baseUrl;
$.ajax({
url:url,
dataType: 'jsonp', //类型
jsonp: "callback", // 参数 后台接受的是回掉函数名
//data:"",
type:'get',
success: function(result) {
callback(null, {
Authorization: result.Authorization, // 跨域拿到签名
XCosSecurityToken: result.XCosSecurityToken,
});
},
error:function(result) {
callback('获取签名出错');
}
})
};
个人微信公众号


Coser，玩呀——69呗~~~❥(^_-)666（以上图片均来源网络，如若侵权联系即删）帖子内容不代表本站观点，仅代表发帖人观点！