好吧，没写之前简单的说一下为什么要写，我还是怀着比较沉重的心情写的这篇教程，主要是心里没底，不知道能写明白不，不过既然提笔了，那就硬着头皮写吧，没办法，毕竟跌跌撞撞总算是搞出来了。还有就是我百度了，没有教程，所以更坚定了我写这篇博文的心。
需要分析
我为什么要将文件上传到服务器，很简单，文件太大，公司的带宽不行，上传一个文件需要的时间太长，导致的是用户体验太差，那么怎么解决这个问题，很有效的解决办法是将文件上传到阿里云或者腾讯云上，我们需要的时候将URL拿到就可以，这样是速度最快的。
官方API地址
步骤解析
既然要使用对象存储，第一步要买这个，不然怎么用？买的过程就就不写了，毕竟我也不参与，买好了以后需要配置的地方简单的说一下：
第一要申请一个bucket（存储桶）
点击其中一个您需要使用的，这个具体可以创建几个，我没有深究，不过应该是够使用的，然后是基础的配置：
配置CORS
这里需要说的是什么呢？就是这里的CORS的配置，这里是干嘛的呢？就是您提交文件的时候，请求的URL是不是支持，您的URL如果是www.baidu.com？name=123&sex=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: selectedFile, // 上传文件对象
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 selectedFile;
var filename;
$("#fileSelector").change(function(){
selectedFile = document.getElementById('fileSelector').files[0];
filename = selectedFile.name;
});
selectedFile //文件对象
filename //文件名字
这个其实很简单，就是操作dom将文件的内容拿到，然后拿到问价名字
完整代码
完整的代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/文件上传/cos-js-sdk-v5.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jQuery/jquery-1.11.2.min.js" type="text/javascript" charset="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 selectedFile;
var filename;
$("#fileSelector").change(function(){
selectedFile = document.getElementById('fileSelector').files[0];
filename = selectedFile.name;
});
function test(){
var cos = new COS({
SecretId: 'AKIDwgAON63kfEZfV6rZR8anlUxBBwRhjOr4',
SecretKey: '4sQijTxB9qHSN1OVMwGJ5bqoXzB7mCqI',
})
cos.putObject({
Bucket: 'ky-1254466590',
Region: 'ap-shanghai',
Key: filename,
StorageClass: 'STANDARD',
Body: selectedFile, // 上传文件对象
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
console.log(err || data);
console.log(data.Location);
});
}
</script>
</html>
以上代码是前端调试的时候用的，也就是没有后端也可以将文件上传到腾讯云
签名生成原理
如果您好奇这个签名是怎么生成的，可以看源码，这部分：
// 签名算法说明文档：https://www.qcloud.com/document/product/436/7778 // 步骤一：计算 SignKey var signKey = CryptoJS.HmacSHA1(qKeyTime, SecretKey).toString(); // 步骤二：构成 FormatString var formatString = [method, pathname, obj2str(queryParams), obj2str(headers), ''].join('\n'); // 步骤三：计算 StringToSign var stringToSign = ['sha1', qSignTime, CryptoJS.SHA1(formatString).toString(), ''].join('\n'); // 步骤四：计算 Signature var qSignature = CryptoJS.HmacSHA1(stringToSign, signKey).toString(); // 步骤五：构造 Authorization var authorization = ['q-sign-algorithm=' + qSignAlgorithm, 'q-ak=' + qAk, 'q-sign-time=' + qSignTime, 'q-key-time=' + qKeyTime, 'q-header-list=' + qHeaderList, 'q-url-param-list=' + qUrlParamList, 'q-signature=' + qSignature].join('&'); console.log("签名是："+authorization); return authorization;
验证流程
https://www.qcloud.com/document/product/436/7778
写的很详细，这是流程图：
成功状态
statusCode ：200说明文件上传成功
那么腾讯云有没有这个文件呢？
当然是有的。
错误码
所有的状态码都会返回只要是不正确的，这里可以查API里面的错误状态码错误码可以很好的解决遇到的问题
写到这里如果您成功上传了，那么下面的可以接着看，如果失败了，就不要看了，因为看了没意义。
怎么请求接口拿签名然后完成上传？
正常的情况下是不会说只让前端操作上传的，一般是请求后端的接口，拿到签名以后再执行上传的操作，这个时候怎么操作呢？
结合后端上传
请求接口
看代码：
var cos = new COS({
getAuthorization: function (options, callback) {
// 异步获取签名
$.get('/user/getAutograph/'+filename, {
method: (options.Method || 'PUT').toLowerCase(),
pathname: '/' + (options.Key || '')
}, function (authorization) {
callback(authorization);
}, 'text');
}
});
当然这里的filename您是可以不填的，这里我是以为需要做一个不重复名字才这样写的，这个名字是我用GUID生成以后处理的，GUID怎么生成这个，我之前写过，您可以找一下，避免出现上传重复文件的问题，腾讯云是上传重复文件的时候会覆盖掉，所以为了不丢数据，只能这样做。
还有一点就是上传的时候一般是需要预览的：
例如这样的，我之前写过预览的功能，您可以找一下
那么生成了签名以后，下面的步骤就和之前写的一样了，就不写重复代码了。
写到这里基本就完成了，但是相信您不是很明白，所以我也不知道怎么说可以说的更明白，只能哪里不明白您再问吧！
