3分钟使用OSS搭建个人的在线图床

const pastePanel = document.getElementById('pastePanel');

1

/**
 * 监听粘贴事件
 */
pastePanel.addEventListener('paste', function (e) {
    console.log('paste');
    // 阻止触发默认的粘贴事件
    e.preventDefault();

    let { items } = e.clipboardData;
    for (const item of items) {
        if (item.kind === "file" && item.type.startsWith("image")) {
            //上传的文件对象
            let file = item.getAsFile();
            //文件名(加一个前缀相当于目录)
            let fileName = 'mdImg/' + btoa(Date.now()) + Date.now().toString().substring(1);
            //开始上传
            uploadFile(file, fileName);
        } else if (item.type === 'text/plain') {
            item.getAsString(str => {
                e.target.value += str;
            });
        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 禁用默认的拖拽触发的内容
document.addEventListener('drop', function (e) {
    e.preventDefault()
}, true)
document.addEventListener('dragover', function (e) {
    e.preventDefault()
}, true)

pastePanel.addEventListener('drop', function (e) {
    let { files } = e.dataTransfer;
    for (const file of files) {
        if (file.type.startsWith("image")) {
            //文件名(加一个前缀相当于目录)
            let fileName = 'mdImg/' + btoa(Date.now()) + Date.now().toString().substring(1);
            //开始上传
            uploadFile(file, fileName);
        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
 * 将结果写入的剪贴板
 * @param {String} text 
 */
function copyRes(text) {
    const input = document.createElement('input');
    document.body.appendChild(input);
    input.setAttribute('value', text);
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
    }
    document.body.removeChild(input);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

粥里有勺糖

Choose mode

3分钟使用OSS搭建个人的在线图床

3分钟使用OSS搭建个人的在线图床

# 使用免费的七牛云OSS(10G)搭建个人的在线图床

# 线上预览

# 所需准备

# 快速上手

# 1.clone仓库

# 2.安装依赖

# 3.修改环境变量

# 4. 启动

# 关键实现部分介绍

# 读取剪贴板中的内容

# 获取拖拽得文件

# 将内容写入剪贴板