前端上传文件到腾讯云（对象存储）

何处锦绣不灰堆

发布于 2020-05-29 12:13:15

13.7K0

发布于 2020-05-29 12:13:15

文章被收录于专栏：农历七月廿一农历七月廿一

好吧，没写之前简单的说一下为什么要写，我还是怀着比较沉重的心情写的这篇教程，主要是心里没底，不知道能写明白不，不过既然提笔了，那就硬着头皮写吧，没办法，毕竟跌跌撞撞总算是搞出来了。还有就是我百度了，没有教程，所以更坚定了我写这篇博文的心。

需要分析

我为什么要将文件上传到服务器，很简单，文件太大，公司的带宽不行，上传一个文件需要的时间太长，导致的是用户体验太差，那么怎么解决这个问题，很有效的解决办法是将文件上传到阿里云或者腾讯云上，我们需要的时候将URL拿到就可以，这样是速度最快的。

官方API地址

javaScript_SDK

步骤解析

既然要使用对象存储，第一步要买这个，不然怎么用？买的过程就就不写了，毕竟我也不参与，买好了以后需要配置的地方简单的说一下：

第一要申请一个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" οnclick="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" οnclick="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: '******************************',
         SecretKey: '******************************',
		 })
			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怎么生成这个，我之前写过，您可以找一下，避免出现上传重复文件的问题，腾讯云是上传重复文件的时候会覆盖掉，所以为了不丢数据，只能这样做。

还有一点就是上传的时候一般是需要预览的：

例如这样的，我之前写过预览的功能，您可以找一下

那么生成了签名以后，下面的步骤就和之前写的一样了，就不写重复代码了。

写到这里基本就完成了，但是相信您不是很明白，所以我也不知道怎么说可以说的更明白，只能哪里不明白您再问吧！

更新

更新时间：2018-7-24

更新内容：解决问题

问题1：签名怎么来的？也就是SecretId和SecretKey两个参数哪里看的？

回答：首先解释一下什么是签名，所谓的签名只是腾讯或者阿里这些公司起的名字，您需要拿到一个类似于门牌号的东西，这样您上传到阿里或者腾讯文件的时候，他可以根据您门牌号知道是您！怎么获取呢？看截图

PS：当然为了安全起见，这个只建议前端调试的时候用，正常的上传是需要后端将签名动态获取的，原理是一样的！

问题2：sdk的js 是做什么的？怎么可以获取？

回答：sdk 的js是做什么的呢？和我们平常写的js是一样的，动态语言而已，只是腾讯给起了一个名字罢了。获取的方式有两种，我上面写的是我们平常安装了nodejs环境的情况下，直接通过命令：npm i cos-js-sdk-v5 --save

但是如果您的电脑没有安装nodejs是不是就不可以下载了呢，当然不是，直接到我的csdn下载里面就可以，或者去腾讯的官网下载也是有的！

问题3：出错以后怎么调试，什么情况下是成功了？

回答：这个怎么调试其实是根据自己的经验来的，他和我们平常出错调试是一样的，直接打开页面F12进入调试页面（如果您的是mac笔记本的话，直接右上角三个点的地方，点击开发者工具）首先看console是不是报错，报的什么错，然后看network里面文件是不是加载完毕了！不是的话，就解决一下。当statucode = 200的时候就是成功了，如果您不明白什么是状态码，直接登录到您的存储桶里面看看是不是有您上传的文件，有的话就是成功了！

问题4：什么是白名单？怎么新增？

回答：白名单不明白的话，黑名单总明白吧？黑名单是做什么的，为了让别人联系不到您，是不是，白名单就是为了让别人可以联系到您！怎么新增呢？看截图

ok，基本上就这些，感谢你们的提问，有什么不明白的可以随时联系我咨询，我尽量答复，会持续更新文章！

下面是每一句话的注释：（照顾一下好奇心强的）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--这个叫做引用js文件（所谓的js就是操作页面动态的语言，可以通过这个sdk的js调到腾讯的接口，以便于完成对腾讯的对接）-->
		<script src="js/cos-js-sdk-v5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--这是html代码，怎么写都行-->
		<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]; //通过操作com拿到用户选择的文件，当然这里也可以操作jquery拿数据
	 	     filename = selectedFile.name; //文件.name是获取源文件的文件名（固定用法）
	 	     console.log("文件的名字是："+filename);//这行是日志
		});  
	 function test(){
	 	/*这部分是获取签名*/
		var cos = new COS({
	     SecretId:  '*********************************',
         SecretKey: '*********************************',
		 })
		/*这部分是腾讯提供的上传的接口*/
			cos.putObject({
		    Bucket: '************',  //存储桶用户识别   （必须有）
		    Region: '*********',     //地区识别（必须有）
		    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>