数码资讯
Node.js腾讯云COS文件上传
昨天写了一篇《Node.js阿里云OSS文件上传》。今天上班来了想起,原来我还有腾讯云的产品,于是见看了下腾讯的对象存储-COS。
使用步骤
进入控制台
腾讯云的页面,发现就没有控制台这三个字,那么怎么进去了?只能点击云产品,选择对应的产品进去了。
获取APPID
获取SecretId和SecretKey
这里大家根据自己上一步获取的APP的开头数组点击进入。我的是125开头的。
这里不要选错了。选错了也没事,后面的测试中看报错修改就是,就是一个API密匙和一个项目密匙,二选一也很好排错。
后端代码实现
看文档
对象存储 Node.js SDK。
这个文档,值得你吐槽。看了七牛云的文档,看了阿里云的文档,再看腾讯云的文档,绝对值得你吐槽。他的上传操作放在文档的最后面。左边的目录列表都是接口英文名字。不管怎样,文档一定要看的
安装SDK
COS服务的Node.js SDK v5版本的GitHub下载地址: https://github.com/tencentyun/cos-nodejs-sdk-v5.git
大部分接口的使用 demo 在这里: demo。
1.去npm(https://www.npmjs.com/),网站搜索cos-nodejs-sdk-v5;
2.在package.json文件的dependencies下添加"cos-nodejs-sdk-v5": "^2.0.8";
3.cd到项目目录下,执行npm install;
获取服务区域
这个就要仔细看文档了,在文档的几个位置有:
Region —— (String) : Bucket 所在区域。枚举值:cn-east,cn-south,cn-north,cn-southwest,sg
这个就需要大家自己发挥自己的想想去和自己的COS取悦对应了。怎么对应我就不说了,呵呵
代码实现
// 腾讯云 COS 的使用 var express = require('express'); var router = express.Router(); var fs = require('fs'); var COS = require('cos-nodejs-sdk-v5'); var cos = new COS({ AppId: '1***********4', SecretId: 'A************************u', SecretKey: '7************************H', }); var tengxun_cos = { Bucket: 'devimage', Region: 'cn-east', } var multer = require('multer') var upload = multer({ dest: './tmp/' }) // 图片上传 router.all('/api/tengxun/upload2', upload.single('file'), function(req, res, next){ // 文件路径 var filePath = './' + req.file.path; // 文件类型 var temp = req.file.originalname.split('.'); var fileType = temp[temp.length - 1]; var lastName = '.' + fileType; // 构建图片名 var fileName = Date.now() + lastName; // 图片重命名 fs.rename(filePath, fileName, (err) => { if (err) { res.end(JSON.stringify({status:'102',msg:'文件写入失败'})); }else{ var localFile = './' + fileName; var key = fileName; // 腾讯云 文件上传 var params = { Bucket: tengxun_cos.Bucket, /* 必须 */ Region: tengxun_cos.Region, /* 必须 */ Key: key, /* 必须 */ FilePath: localFile, /* 必须 */ } cos.sliceUploadFile(params, function(err, data) { if(err) { fs.unlinkSync(localFile); res.end(JSON.stringify({status:'101',msg:'上传失败',error:JSON.stringify(err)})); } else { fs.unlinkSync(localFile); var imageSrc = 'https://devimage-1***********4.cossh.myqcloud.com/' + data.Key; res.end(JSON.stringify({status:'100',msg:'上传成功',imageUrl:imageSrc})); } }); } }); })
上面的代码基本也展示了上传的流程。具体看代码即可。
前端测试
前端就写了一个最简单的form表单的上传。
<form action="upload2" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" /> </form>
这里大家可以直接使用我的接口测试。
扩展
在Ajax实现图片上传,这里做的是前端把图片转出base64数据,通过ajax上传。
后端代码实现
// 图片上传 router.post('/api/tengxun/upload', function(req, res, next){ // 图片数据流 var imgData = req.body.imgData; // 构建图片名 var fileName = Date.now() + '.png'; // 构建图片路径 var filePath = './tmp/' + fileName; //过滤data:URL var base64Data = imgData.replace(/^data:image/w+;base64,/, ""); var dataBuffer = new Buffer(base64Data, 'base64'); fs.writeFile(filePath, dataBuffer, function(err) { if(err){ res.end(JSON.stringify({status:'102',msg:'文件写入失败'})); }else{ var localFile = filePath; var key = fileName; // 腾讯云 文件上传 var params = { Bucket: tengxun_cos.Bucket, /* 必须 */ Region: tengxun_cos.Region, /* 必须 */ Key: key, /* 必须 */ FilePath: localFile, /* 必须 */ } cos.sliceUploadFile(params, function(err, data) { if(err) { fs.unlinkSync(filePath); res.end(JSON.stringify({status:'101',msg:'上传失败',error:JSON.stringify(err)})); } else { fs.unlinkSync(filePath); var imageSrc = 'https://devimage-1***********4.cossh.myqcloud.com/' + data.Key; res.end(JSON.stringify({status:'100',msg:'上传成功',imageUrl:imageSrc})); } }); } }); })
上面的两端后端代码里面拼接图片外网地址我加了星号处理,这里有我的APPID信息。那么那个地址的前缀怎么获取呢?
这里选择第一个JSON API。