免費搭建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的存儲空間，尚未任何別的條條框框的限制，很是符合我懶癌的個性。至於如何選擇就看你們的嘍，方法已經給到位了，固然你也能夠全都要，畢竟窮人才作選擇哈哈，最後煩請各位大佬點個贊！！！