前言
最近在倒腾自己的博客，也快接近尾声了，期间学到了不少东西，关于图片服务器市面上解决的方案有很多，今天主要就腾讯云和七牛云说下各自的使用，毕竟有个百度云盘般的大容量存储空间，真的是丝滑。
图片？文件？音频？视频？，别问我，看下面
腾讯云cos存储
一. 安装
npm i cos-nodejs-sdk-v5 --save二. 开始使用
var COS = require('cos-nodejs-sdk-v5');
var cos = new COS({
SecretId: 'COS_SECRETID',
SecretKey: 'COS_SECRETKEY'
});三. 上传图片
1. API
cos.putObject({
Bucket: 'examplebucket-1250000000', /* 存储桶名称 */
Region: 'ap-beijing', /* 存储桶所在地域 */
Key: 'picture.jpg', /* 必须 */
StorageClass: 'STANDARD',
Body: fs.createReadStream('./picture.jpg'), // 上传文件对象
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
console.log(err || data);
});2. 参数
Bucket和Region
存储桶名称和存储桶地域名称
查看方法（一定不要搞错）
key
表示你存储的路径(Key的K一定要大写，当时因为k小写导致找了半小时bug)
比如key:"1.png"，表示你存储在根路径下名为1.png
如果你想存储在img文件下blog的文件下，应该这样写Key:"/img/blog/1.png"
Body
上传文件对象
Body:fs.createReadStream(本地文件路径), // 上传文件对象OnPress
成功时的回调
onProgress: function (progressData) {
console.log(JSON.stringify(progressData));//上传成功的返回值
}
3 .返回参数
statusCode
状态码，200表示成功
Location
图片链接地址（想要直接访问，需要手动添加
‘https://’前缀）
4. 常见错误
缺少参数key
missing param key存储桶名称写错
{ error:
{ Code: 'AccessDenied',
Message: 'Access Denied.',
ServerTime: '2019-09-29T10:50:03Z',
Resource:
'bucket-12345678.cos.ap-beijing.myqcloud.com/1569754206770e.png',
RequestId: 'NWQ5MDhjNWJfYTdjMjJhMDlfZDk5YV8yMDIwYmJk',},
statusCode: 403,存储桶所在地域名名称写错
error:
{ Code: 'NoSuchBucket',
Message: 'The specified bucket does not exist.',
Resource:
'hansu-1253325863.cos.ap-beijing.myqcloud.com/1569754268679e.png',
RequestId: 'NWQ5MDhjOTlfNzliNDBiMDlfMjgzYTVfMjFiMjE5Yg==',
},
statusCode: 4045.删除本地图片
执行node脚本，在成功上传之后执行cmd命令删除本地文件
linux下
cmd.js
const fs=require("fs")
const path = require('path');
const {exec} =require('child_process')
const cmder=(cmd)=>{
console.log(cmd)
return new Promise((resolve,reject)=>{
exec(cmd,(error,stdout,stderr)=>{
if(error){
reject(error)
}
else{
resolve("删除成功")
}
})
})
}调用
let filePath="static/upload/article"
cmder(`rm -f ./${filePath}*`).then(d => {
console.log(d)
})windows
//window删除脚本插件
const fileTool = require('fs-extra');
const rmDirFiles = dir => {
const dirPath = fs.readdirSync(dir);
dirPath.map(item => {
const currentPath = path.join(dir, item);
console.log(`rmove ${currentPath}`);
fileTool.removeSync(currentPath);
});
}调用
let filePath="static/upload/article"
rmDirFiles(`./${filePath}`);6. 完整案例
cmd.js
const fs=require("fs")
const path = require('path');
const {exec} =require('child_process')
//window删除脚本插件
const fileTool = require('fs-extra');
const cmder=(cmd)=>{
console.log(cmd)
return new Promise((resolve,reject)=>{
exec(cmd,(error,stdout,stderr)=>{
if(error){
reject(error)
}
else{
resolve("删除成功")
}
})
})
}
const rmDirFiles = dir => {
const dirPath = fs.readdirSync(dir);
dirPath.map(item => {
const currentPath = path.join(dir, item);
console.log(`rmove ${currentPath}`);
fileTool.removeSync(currentPath);
});
}
module.exports={cmder,rmDirFiles}main.js
var COS = require('cos-nodejs-sdk-v5');
var cos = new COS({
SecretId: 'xx',
SecretKey: 'xx'
});
const {cmder,rmDirFiles}=require("../utils/cmd")
router.post("/articleAdd", passport.authenticate("jwt", { session: false }), upload.single('file'), (req, res) => {
let { title, cate, summary, content } = req.body
//图片设置
let { originalname, filename, path } = req.file
let i = originalname.lastIndexOf(".")
filename = Date.now() + Math.ceil(Math.random() * 100) + originalname.substr(i - 1);
let filePath="static/upload/"
fs.renameSync(path, filePath + filename, (err) => {
if (err); throw err;
cos.putObject({
Bucket: 'hansu-1253325863', // 桶名-APPID 必须
Region: 'ap-shanghai', //区域 必须
Key: filename, //文件名必须
Body:fs.createReadStream(filePath + filename), // 上传文件对象
}, function (err, data) {
console.log(err || data);//上传失败的返回值
if(data.statusCode===200){
let data = ({
author: "hansu",
title,
cate,
summary,
content,
cover_img: "https://"+d.Location,
n_look: 1,
n_like: 1,
n_comment: 1,
postTime: Date.now()
})
let newArticle=articleModel(data)
newArticle.save().then(()=>{
if (process.env.NODE_ENV === "production") {
cmder(`rm -f ./${filePath}*`).then(d => {
console.log(d)
})
}
else {
// 兼容windows
rmDirFiles(`./${filePath}`);
}
res.send({ code: 0 });
})
}
else{
res.send({
code:1
})
}
});
})
);
});七牛云
一. 起步
随着项目图片资源越来越多，我们的服务器又很垃圾，所以必须找个图片服务器，国内比较出名的就是七牛云了。七牛云配置也很简单。
这里没有域名也没有关系，先使用自带的默认域名，以前好像是只有30天有效期，如果不换备案的域名，所有链接就会失效，现在不知道是升级了还是融资了，貌似可以永久使用。
二. 服务端配置上传图片
创建好后，我们需要在服务端进行七牛云上传的配置，这里我们后台用的是node.js，我参考了几个库，最后选择使用qn
具体使用
七牛云的配置
let qnConfig={
accessKey:"xxx",//个人中心有
secretKey:"xxx",//个人中心有
bucket:"hansu_imgs",//对象存储的名称
uploadURL:"http://up-z2.qiniup.com",//上传地址
}这个上传地址一定要注意，不同地区的地址会略有差别，具体可以参考以下的文档。
上传API
const qn=require("qn")
const client=qn.create(qnConfig)
client.uploadFile(图片在本地服务器的路径,key:{可以设置成图片文件名},(err,result)=>{
if(err){
console.log(err)
}
console.log(result)
})如果上传成功会返回result
{
hash:"",
key:"",
"x:ctime":xx,
....
url:""
}就是这么简单，打开你的七牛云会发现多了一张图片。
还有一步同上，就是删除本地图片资源
最后
说实话本人不太推荐七牛云，因为如果没有备案过的域名最多只能使用一个月，后来使用了腾讯云，一开始是使用它来写markdown文档，把markdown的图片都放到cos上，后来在开发个人博客的时候，想到用cos作为图片服务器，毕竟有50G的存储空间，还没有任何别的条条框框的限制，非常符合我懒癌的个性。至于如何选择就看大家的喽，方法已经给到位了，当然你也可以全都要，毕竟穷人才做选择哈哈，最后烦请各位大佬点个赞！！！
