Based on seven cattle cloud object storage, set up your own unique minimalist Web map bed applications (implement the principle of hand touching hand to explain the core part of the comment)

A minimalist Web map bed applications , support for copy and paste and drag and drop upload pictures

1. Develop reason

When writing markdown notes and blog posts, insert a picture found in the article of daily use Vs Code is very inconvenient

• Use local paper prepared by the relative path --- not directly copy paste elsewhere
• The use of third-party view of the bed --- need to login account (or put it in your "pocket" in the assured)
• vs code --- many built-ins inconvenient bug
• Like tossing (true)

2. Effect Preview

Discard all the bells and whistles, to meet the daily use

Static map

GIF

Click to experience a

Project Address: GitHub , accompanied by a detailed food guide, from 0-1

3. Hands explain the core part of the code

(1) how to get copy and paste the picture?

First create a textarea get content paste / drag, img showing copy / drag pictures

<!-- 用于粘贴或拖拽图片 -->
<textarea id="paste-panel"></textarea>
<!-- 用于展示粘贴/拖拽的图片 -->
<img id="img-panel" src="">

Once created, you can see the effect of

Next is to write js code

// 获取到对应的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;
        }
    }
})

effect

(2) how to get drag the picture?

Html structure based on just, let us work together to write js code

// 禁用默认的拖拽触发的内容(防止浏览器直接打开图片文件)
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;
            }
        }
    }
})

effect

The two key issues on this resolved

(3) how to upload to seven cattle cloud?

Reference: qiniu-JavaScript-sdk documentation

Writing method js (WebPACK projects using constructs, so here is downloaded through npm qiniu-js-SDK-dependent may be used directly in the page script tag incorporated cdn resources of qiniu-js-sdk)

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) How to generate a user to upload credentials token?

Here to generate using node.js

Reference qiniu-nodejs-sdk documentation

Writing 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);

Picture interpretation

1. The name of the object storage bucket 2.Access Key and Secret Key

After the completion of the writing operation token.js

node token.js

Token.txt generate files in the same directory, the contents of which is the desired user credentials

In summary

This can build a simple web-based map bed seven cattle cloud using the knowledge mentioned above

4. Finally, attach references and links to project github address

Reference Documents

1. qiniu-JavaScript-sdk documentation

2. qiniu-nodejs-sdk documentation

project address

My Github

project Address: https://github.com/ATQQ/image-bed-qiniu

experience Address: https://picker.sugarat.top/