使用的框架是laravel 直传数据到cos
1.写一个路由
在这里插入代码片//cos签名
public function getSign(Request $request){
//判断如果没有登录直接返回
判断是不是本站不是直接return返回 禁止使用直传
$sts = new STS();
// 配置参数
// echo env("COSV5_SECRET_ID");
// echo "<br>";
// echo env("COSV5_SECRET_KEY");
// echo "<br>";
// echo env("OSS_IMG_BUCKET");
// echo "<br>";
// echo env("COSV5_REGION");
//
// die;
$config = array(
'url' => 'https://sts.tencentcloudapi.com/',
'domain' => 'sts.tencentcloudapi.com',
'proxy' => '',
'secretId' => env("COSV5_SECRET_ID"), // 固定密钥
'secretKey' => env("COSV5_SECRET_KEY"), // 固定密钥
'bucket' => env("OSS_IMG_BUCKET"), // 换成你的 bucket
'region' => env("COSV5_REGION"), // 换成 bucket 所在园区
'durationSeconds' => 3600, // 密钥有效期 注意注意注意重要的事情说三遍(文件过大一定要把时间设置长一点 最大为7200 较短上传的时候会出现403放翁权限的问题)
// 允许操作(上传)的对象前缀,可以根据自己网站的用户登录态判断允许上传的目录,例子: user1/* 或者 * 或者a.jpg
// 请注意当使用 * 时,可能存在安全风险,详情请参阅:https://cloud.tencent.com/document/product/436/40265
'allowPrefix' => '*',
// 密钥的权限列表。简单上传和分片需要以下的权限,其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
'allowActions' => array (
// 所有 action 请看文档 https://cloud.tencent.com/document/product/436/31923
// 简单上传
'name/cos:PutObject',
'name/cos:PostObject',
// 分片上传
'name/cos:InitiateMultipartUpload',
'name/cos:ListMultipartUploads',
'name/cos:ListParts',
'name/cos:UploadPart',
'name/cos:CompleteMultipartUpload'
)
);
// 获取临时密钥,计算签名
$tempKeys = $sts->getTempKeys($config);
// 返回数据给前端
header('Content-Type: application/json');
header('Access-Control-Allow-Origin:*'); // 这里修改允许跨域访问的网站
header('Access-Control-Allow-Headers: origin,accept,content-type');
echo json_encode($tempKeys);
}
视图页面可以这样写
在这里插入代码片
<script src="https://unpkg.com/cos-js-sdk-v5/demo/common/cos-auth.min.js"></script>
<script>
(function () {
//监听表单选择文件
$("#fileSelector").change(function(e) {
$("#submitBtn").show();
var e = e || window.event;
//获取 文件 个数 取消的时候使用
var files = e.target.files;
if(files.length>0){
// 获取文件名 并显示文件名
var fileName = files[0].name;
$(".Js_address-input").text(fileName);
}
})
// 请求用到的参数
var Bucket = "{{env('OSS_IMG_BUCKET')}}";
var Region = "{{env('COSV5_REGION')}}";
var protocol = location.protocol === 'https:' ? 'https:' : 'http:';
var prefix = protocol + '//' + Bucket + '.cos.' + Region + '.myqcloud.com/';
// 对更多字符编码的 url encode 格式
var camSafeUrlEncode = function (str) {
return encodeURIComponent(str)
.replace(/!/g, '%21')
.replace(/'/g, '%27')
.replace(/\(/g, '%28')
.replace(/\)/g, '%29')
.replace(/\*/g, '%2A');
};
// 计算签名
var getAuthorization = function (options, callback) {
//var method = (options.Method || 'get').toLowerCase();
//var key = options.Key || '';
//var pathname = key.indexOf('/') === 0 ? key : '/' + key;
var url = '/getUploadSign';
var xhr = new XMLHttpRequest();
// var data = {
// method: method,
// pathname: pathname,
// };
xhr.open('GET', url, true);
//xhr.setRequestHeader('content-type', 'application/json');
xhr.onload = function (e) {
var credentials;
try {
credentials = (new Function('return ' + xhr.responseText))().credentials;
} catch (e) {}
if (credentials) {
callback(null, {
XCosSecurityToken: credentials.sessionToken,
Authorization: CosAuth({
SecretId: credentials.tmpSecretId,
SecretKey: credentials.tmpSecretKey,
Method: options.Method,
Pathname: options.Pathname,
})
});
} else {
console.error(xhr.responseText);
callback('获取签名出错');
}
};
xhr.onerror = function (e) {
callback('获取签名出错');
};
xhr.send();
};
// 上传文件
var uploadFile = function (file, callback) {
if(file.size>10*1020*1024){
$("#ctlBtn").hide();
layer.msg('视频大小不得超过10M');return;
}
$("#submitBtn").hide();
var Key = 'auctionvideo/'+"{{ $special->id }}/"+ file.name; // 这里指定上传目录和文件名; // 这里指定上传目录和文件名
getAuthorization({Method: 'PUT', Pathname: '/'+ Key}, function (err, info) {
if (err) {
alert(err);
return;
}
var auth = info.Authorization;
var XCosSecurityToken = info.XCosSecurityToken;
var url = prefix + camSafeUrlEncode(Key).replace(/%2F/g, '/');
//var url = prefix + Key;
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('Authorization', auth);
XCosSecurityToken && xhr.setRequestHeader('x-cos-security-token', XCosSecurityToken);
xhr.upload.οnprοgress=progressFunction;
xhr.onload = function () {
if (/^2\d\d$/.test('' + xhr.status)) {
var ETag = xhr.getResponseHeader('etag');
callback(null, {url: url, ETag: ETag});
} else {
callback('文件 ' + Key + ' 上传失败,状态码:' + xhr.status);
}
};
xhr.onerror = function () {
callback('文件 ' + Key + ' 上传失败,请检查是否没配置 CORS 跨域规则');
};
xhr.send(file);
});
};
// 监听表单提交
document.getElementById('submitBtn').onclick = function (e) {
var file = document.getElementById('fileSelector').files[0];
if (!file) {
layer.msg('未选择上传文件',{icon:2,time:2000});
//document.getElementById('msg').innerText = '';
return;
}
file && uploadFile(file, function (err, data) {
$("#videopath").val(data.url);
layer.msg('上传成功',{icon:1,time:1000});
});
};
})();
function progressFunction(evt) {
var progress=document.querySelector("progress");
if (evt.lengthComputable) {//
progress.value=(Math.round(evt.loaded / evt.total * 100));
}
}
</script>