前端上传文件到腾讯云(对象存储) |
您所在的位置:网站首页 › 腾讯文档上传照片 › 前端上传文件到腾讯云(对象存储) |
好吧,没写之前简单的说一下为什么要写,我还是怀着比较沉重的心情写的这篇教程,主要是心里没底,不知道能写明白不,不过既然提笔了,那就硬着头皮写吧,没办法,毕竟跌跌撞撞总算是搞出来了。还有就是我百度了,没有教程,所以更坚定了我写这篇博文的心。 需要分析我为什么要将文件上传到服务器,很简单,文件太大,公司的带宽不行,上传一个文件需要的时间太长,导致的是用户体验太差,那么怎么解决这个问题,很有效的解决办法是将文件上传到阿里云或者腾讯云上,我们需要的时候将URL拿到就可以,这样是速度最快的。 官方API地址javaScript_SDK 步骤解析既然要使用对象存储,第一步要买这个,不然怎么用?买的过程就就不写了,毕竟我也不参与,买好了以后需要配置的地方简单的说一下: 第一要申请一个bucket(存储桶) ![]() ![]() 点击其中一个您需要使用的,这个具体可以创建几个,我没有深究,不过应该是够使用的,然后是基础的配置: ![]() 这里需要说的是什么呢?就是这里的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 // 文件上传,不得超过5GBucket //容器 购买以后可以生成 下图是对应关系![]() 下面的是打印错误信息和成功的日志 那么这里的文件对象怎么拿到呢? 拿文件对象看代码: 这个其实很简单,就是操作dom将文件的内容拿到,然后拿到问价名字 完整代码完整的代码是: 以上代码是前端调试的时候用的,也就是没有后端也可以将文件上传到腾讯云 签名生成原理如果您好奇这个签名是怎么生成的,可以看源码,这部分: // 签名算法说明文档: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,基本上就这些,感谢你们的提问,有什么不明白的可以随时联系我咨询,我尽量答复,会持续更新文章! 下面是每一句话的注释:(照顾一下好奇心强的) 问题描述:有些使用者在上传以后发现location是没有的,一直是这样的: ![]() 上面显示是上传成功了,但是一直不显示URL。 解决办法: 您打开自己的存储桶,里面的CORS配置,是不是没有配置Expose-Headers这个参数,这样的: ![]() 如果不配置的话,是不显示的,配置一下是最好的。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |