基於七牛雲對象存儲,搭建一個自己專屬的極簡Web圖床應用(手摸手的注釋講解核心部分的實現原理)

本文轉載自查看原文 2020-01-23 00:13 895 web前端/ 開發/學習筆記/ webpack4/ Web/ 個人作品/ javascript

一個極簡的Web圖床應用,支持復制粘貼與拖拽上傳圖片

1.開發緣由

日常使用Vs Code編寫markdown筆記與博客文章時,在文章中插入圖片時發現非常不便

使用本地文件編寫相對路徑---沒法直接復制粘貼到其它地方
使用第三方的圖床---需要登錄賬號(還是放到自己"口袋"里放心)
vs code內置插件--- 諸多bug使用不方便
喜歡折騰(真實)

2.效果預覽

拋棄一切花里胡哨的,滿足日常使用

靜圖

動圖

點擊體驗一把

項目地址:github ,附有詳細的食用指南,從0到1

3.手把手講解代碼核心部分

(1)如何獲取復制粘貼的圖片?

首先創建一個textarea獲取粘貼/拖拽的內容,img展示復制/拖拽的圖片

<!-- 用於粘貼或拖拽圖片 -->
<textarea id="paste-panel"></textarea>
<!-- 用於展示粘貼/拖拽的圖片 -->
<img id="img-panel" src="">

創建完畢后你可以看到的效果

接下來是書寫js代碼

// 獲取到對應的dom
let $textarea = document.getElementById('paste-panel');
let $img = document.getElementById('img-panel');

/**
 * 綁定粘貼事件
 **/
$textarea.addEventListener('paste', function(e) {
    // 組織觸發默認的粘貼事件
    e.preventDefault();
    // 獲取粘貼板中的內容
    let {
        items
    } = e.clipboardData;

    // 遍歷獲取到的items
    for (const item of items) {
        // 如果是文件對象且類型為圖片
        if (item.kind === 'file' && item.type.includes('image')) {
            // 獲取到文件對象
            let imgFile = item.getAsFile()
            // 將文件轉成url
            let src = URL.createObjectURL(imgFile)
            // 展示生成的url
            $img.src = src;
            return;
        }
    }
})

效果

(2)如何獲取拖拽的圖片?

基於剛才的html結構,讓我們一起來書寫js代碼

// 禁用默認的拖拽觸發的內容(防止瀏覽器直接打開圖片文件)
document.addEventListener('drop', function(e) {
    e.preventDefault()
})
document.addEventListener('dragover', function(e) {
    e.preventDefault()
})

/**
 * 監聽文件拖拽相關事件
 **/
// 判斷文件是否是拖拽進入了指定區域再釋放
let drag = false;

// 拖拽進入
$textarea.addEventListener('dragenter', function(e) {
    drag = true;
})

// 拖拽在區域里移動
$textarea.addEventListener('dragover', function(e) {
    drag = true;
});

// 離開指定的區域
$textarea.addEventListener('dragleave', function(e) {
    drag = false;
})

// 在指定的區域釋放
$textarea.addEventListener('drop', function(e) {
    if (drag) {
        // 獲取拖拽的文件
        let {
            files
        } = e.dataTransfer;
        for (const file of files) {
            // 如果為圖片文件則展示
            if (file.type.includes("image")) {
                // 將文件轉成url
                let src = URL.createObjectURL(file)
                    // 展示生成的url
                $img.src = src;
                return;
            }
        }
    }
})

效果

關鍵的兩個問題就這樣解決了

(3) 如何上傳到七牛雲?

參考:qiniu-JavaScript-sdk文檔

書寫js方法(項目采用的webpack構建,所以這里是通過npm下載的qiniu-js-SDK依賴,也可以直接在頁面中使用script標簽引入qiniu-js-sdk的cdn資源)

import * as qiniu from "qiniu-js";
let Domain = 'bind-host' // 七牛雲對象存儲空間綁定的域名
let observer = {
    next(res) {
        console.log(res);
        //上傳進度
        let { percent } = res.total;
    },
    error(err) {
        console.log(err);
    },
    complete(res) {
        let { key } = res;
        // 完整的圖片鏈接
        let completeUrl = `${Domain}/${key}`;
    }
}

/**
 * 文件上傳
 * @param {Blob|File} file
 * @param {String} filename
 **/
function uploadFile(file, filename) {
    // 上傳配置
    let putExtra = {
        fname: filename,// 文件名稱
        params: {},
        mimeType: null // 文件類型(null:系統自動識別)
    };

    // 上傳用戶平憑據
    let token = 'xxxxx....';
    // config
    let config = {
        useCdnDomain: true,// 是否使用cdn加速
        region: qiniu.region.z0
        //選擇上傳域名區域；當為 null 或 undefined 時，
        //自動分析上傳域名區域,我是選擇的華東所以是z0
        }
    }
    // token 上傳身份驗證秘鑰
    let observable = qiniu.upload(file, filename, token, putExtra, config)

    // 配置回調函數
    observable.subscribe(observer)
}

(4) 如何生成用戶上傳憑據token?

這里使用node.js去生成

參考qiniu-nodejs-sdk文檔

書寫js

const qiniu = require('qiniu')
const fs = require('fs');

// 七牛賬號下的一對有效的Access Key和Secret Key
// 對象存儲空間名稱 bucket
let accessKey = 'xxxx',
    secretKey = 'xxx',
    bucket = 'xxxx';

//鑒權對象
let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

let options = {
    scope: bucket,
    expires: 60 * 60 * 24 * 7 //這里設置的7天,token過期時間(s(秒))
};

let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken = putPolicy.uploadToken(mac);

// 將獲取的token生成寫入到token.txt中
fs.writeFileSync("./token.txt", uploadToken);

圖片解釋

1. 對象存儲空間名稱 bucket