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

時間 2020-01-23

標籤基於七牛 7牛對象存儲搭建一個本身專屬 web 應用註釋講解核心部分實現原理欄目 HTML 简体版

原文原文鏈接

一個極簡的Web圖牀應用,支持複製粘貼與拖拽上傳圖片javascript

1.開發原因

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

使用本地文件編寫相對路徑---無法直接複製粘貼到其它地方
使用第三方的圖牀---須要登陸帳號(仍是放到本身"口袋"裏放心)
vs code內置插件--- 諸多bug使用不方便
喜歡折騰(真實)

2.效果預覽

拋棄一切花裏胡哨的,知足平常使用java

靜圖

動圖

點擊體驗一把

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

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

(1)如何獲取複製粘貼的圖片?

首先建立一個textarea獲取粘貼/拖拽的內容,img展現複製/拖拽的圖片webpack

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

建立完畢後你能夠看到的效果git

接下來是書寫js代碼github

// 獲取到對應的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;
        }
    }
})

效果web

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

基於剛纔的html結構,讓咱們一塊兒來書寫js代碼npm

// 禁用默認的拖拽觸發的內容(防止瀏覽器直接打開圖片文件)
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

2.Access Key和Secret Key

書寫完成後運行token.js