免费搭建50G图片服务器（七牛云和腾讯云）

时间 2019-11-07

标签免费搭建 50g 图片服务器七牛 7牛云和腾讯栏目腾讯繁體版

原文原文链接

前言

最近在倒腾本身的博客，也快接近尾声了，期间学到了很多东西，关于图片服务器市面上解决的方案有不少，今天主要就腾讯云和七牛云说下各自的使用，毕竟有个百度云盘般的大容量存储空间，真的是丝滑。javascript

图片？文件？音频？视频？，别问我，看下面html

腾讯云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和Regionjava

存储桶名称和存储桶地域名称node

查看方法（必定不要搞错）linux

keygit

表示你存储的路径(Key的K必定要大写，当时由于k小写致使找了半小时bug)github

好比key:"1.png"，表示你存储在根路径下名为1.pngnpm

若是你想存储在img文件下blog的文件下，应该这样写Key:"/img/blog/1.png"windows

Bodyapi

上传文件对象

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: 404复制代码

5.删除本地图片

执行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

qn的github

具体使用

七牛云的配置

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的存储空间，尚未任何别的条条框框的限制，很是符合我懒癌的个性。至于如何选择就看你们的喽，方法已经给到位了，固然你也能够全都要，毕竟穷人才作选择哈哈，最后烦请各位大佬点个赞！！！