前端上传⽂件到腾讯云（对象存储）
好吧，没写之前简单的说⼀下为什么要写，我还是怀着⽐较沉重的⼼情写的这篇教程，主要是⼼⾥没底，不知道能写明⽩不，不过既然提笔了，那就硬着头⽪写吧，没办法，毕竟跌跌撞撞总算是搞出来了。还有就是我百度了，没有教程，所以更坚定了我写这篇博⽂的⼼。
需要分析
我为什么要将⽂件上传到服务器，很简单，⽂件太⼤，公司的带宽不⾏，上传⼀个⽂件需要的时间太长，导致的是⽤户体验太差，那么怎么解决这个问题，很有效的解决办法是将⽂件上传到阿⾥云或者腾讯云上，我们需要的时候将URL拿到就可以，这样是速度最快的。
官⽅API地址
步骤解析
既然要使⽤对象存储，第⼀步要买这个，不然怎么⽤？买的过程就就不写了，毕竟我也不参与，买好了以后需要配置的地⽅简单的说⼀下：第⼀要申请⼀个bucket（存储桶）
点击其中⼀个您需要使⽤的，这个具体可以创建⼏个，我没有深究，不过应该是够使⽤的，然后是基础的配置：
配置CORS
这⾥需要说的是什么呢？就是这⾥的CORS的配置，这⾥是⼲嘛的呢？就是您提交⽂件的时候，请求的URL是不是⽀持，您的URL如果是？name=123&x=nan，那么您的这个URl是不是可以被腾讯云识别，就要看您的这个CORS⾥⾯有没有配置这个。
ok写到这⾥我突然想起来了，其实我们在购买存储以后，腾讯云会给您⼀系列的字段值：
前驱和后驱哪个好
这些是⼀会我会说到的，这⾥的字段不⽤担⼼，后端会处理好的，说明⼀下这些是做什么的，
appleId很明显就是识别⾝份⽤的
SecretId和SecretKey是⽤来⽣成签名的（我后⾯会说）
Bucket和Region是⽤来识别地区信息的茯苓减肥法
下载cos
使⽤之前先将js下载下来：
npm i cos-js-sdk-v5 --save
我们前端怎么使⽤这些呢？我们如果是调试的时候当然最好是⾃⼰⽣成签名，然后将⽂件上传到腾讯云，腾讯云识别以后将⽂件存储进去，但是前端怎么⽣成签名呢？也很简单，看代码
打钩的方框
⽣成签名
var cos = new COS({
SecretId: '*****************************',
SecretKey: '**************************',
})
COS在API⾥⾯是有介绍的，是⼀种⽂件上传的函数这样就⽣成了签名
上传⽂件
怎么上传⽂件呢？
看代码：
cos.putObject({
Bucket: 'ky-********',
Region: 'ap-shanghai',
Key: name,
StorageClass: 'STANDARD',
Body: lectedFile, // 上传⽂件对象
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
console.log(err || data);
console.log(data.Location);
});
APi⽂档⾥⾯有介绍
putObject // ⽂件上传，不得超过5G
Bucket //容器购买以后可以⽣成下图是对应关系
Region //地区购买的时候可以设置
Key //⽂件名
StorageClass //存储⽅式
Body //⽂件对象
下⾯的是打印错误信息和成功的⽇志
那么这⾥的⽂件对象怎么拿到呢？
拿⽂件对象
看代码：
三汁焖锅<input id="fileSelector" type="file" name="filename">
<input id="submitBtn" type="button" onclick="test()" value="提交"> <img src="" id="img0" class="img-thumbnail">
var lectedFile;
var filename;
$("#fileSelector").change(function(){
lectedFile = ElementById('fileSelector').files[0]; filename = lectedFile.name;
});
lectedFile //⽂件对象
filename //⽂件名字
这个其实很简单，就是操作dom将⽂件的内容拿到，然后拿到问价名字
完整代码
完整的代码是：
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8">
<title></title>
<script src="../js/⽂件上传/cos-js-sdk-v5.js" type="text/javascript" chart="utf-8"></script> <script src="../js/jQuery/jquery-1.11.2.min.js" type="text/javascript" chart="utf-8"></script> </head>
<body>
<input id="fileSelector" type="file" name="filename">
<input id="submitBtn" type="button" onclick="test()" value="提交">
<img src="" id="img0" class="img-thumbnail">
</body>
<script type="text/javascript">
var lectedFile;
var filename;
$("#fileSelector").change(function(){
lectedFile = ElementById('fileSelector').files[0];
filename = lectedFile.name;
});
function test(){
var cos = new COS({
SecretId: '******************************',
SecretKey: '******************************',
})
cos.putObject({
Bucket: 'ky-1254466590',
喜闻乐见的近义词Region: 'ap-shanghai',
Key: filename,
StorageClass: 'STANDARD',
Body: lectedFile, // 上传⽂件对象
优秀广告
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
贵由console.log(err || data);
console.log(data.Location);
非常老师
});
}
</script>
</html>
以上代码是前端调试的时候⽤的，也就是没有后端也可以将⽂件上传到腾讯云
签名⽣成原理
如果您好奇这个签名是怎么⽣成的，可以看源码，这部分：
