🤓
blog-article
  • Introduction
  • 面试题
    • 1. 输入url发生了什么
  • Personal Works
    • 1. 简单的Web图床
  • CSS动画笔记
    • 1.transition 属性
    • 2.transition 实例
  • css 笔记
    • 1. box-shadow 阴影
    • 2. columns 设置列宽和列数
    • 3. 伪元素after与before
  • html 笔记
    • 1. 不常用的h5标签杂记
  • webpack4
    • 1. 文档学习记录
    • 2. 加载CSS
    • 3. 加载less
    • 4. 加载sass
    • 5. 根据浏览器自动添加css前缀
    • 6. 图片文件处理
    • 7. 字体文件处理
    • 8. 引入jQuery
    • 9. 打包HTML文件
    • 10. 分离css插件
    • 11. babel简单使用
    • 12. 清理旧打包文件插件
    • 13. 拷贝静态资源
  • javascript
    • 1. js获取某年某月的天数
  • npm
    • 2. JSON.stringify()完整用法
    • 1. 入门篇
    • 2. 进阶篇
  • Node.js
    • 1. 使用koa-body中间件后ctx.request.body内容为空
    • 2. uni-app使用Node+Koa2接收上传的文件
  • SQL
    • 1. 查询
    • 2. 插入
    • 3. 修改
    • 4. 删除
    • 5. 期末复习
  • Git
    • 1. git add命令后出现another git process...问题
    • 2. 将文件从暂存区移除
  • vue-cli
    • 1. vue-cli(脚手架)引入vue.config.js文件后热更新失效,每次保存都会刷新页面
  • uni-app
    • 1. uni-app中不使用scroll-view组件,监听页面滑直底部事件
  • 设计模式
    • 创建型模式
    • 单例模式
    • 工厂模式
    • 抽象工厂模式
  • Spring boot
    • 1. 使用自定义参数注解获取 token 中User数据
  • IDEA
    • 1. 设置maven项目的默认配置
  • Linux
    • 1.常用命令
    • 2.常用基础命令2
    • 3.linux目录介绍
    • 4. vi编辑器使用
    • 5.用户管理
    • 6. 文件属性与权限操作
    • 7. 文件归档与解压缩
    • 8. gcc的基本用法
    • 9. gdb调试器的基本用法
    • 10. Makefile基本用法
  • shell
    • shell与crontab定时器的结合
    • 1. shell 变量与常见符号
    • 2. shell中的四则运算符
    • 3. 条件判断
    • 4. 输入输出
    • 5. 输出彩色的内容
    • 6. 流程控制
    • 7. 函数
  • Docker
  • 嵌入式系统给结构及原理
  • 学校课程笔记
    • 1. java EE 复习
    • 2. 马原复习论述题
    • 3. 嵌入式软件技术复习
    • 4. 嵌入式操作系统复习
    • 5. 马原选择题
    • 6. 马原辨析题
    • 7. 马原材料题
    • 8. 计网学习笔记
    • 9. 计网复习
      • 1. 第一章
Powered by GitBook
On this page
  • 1.开发缘由
  • 2.效果预览
  • 静图
  • 动图
  • 点击体验一把
  • 3.手把手讲解代码核心部分
  • (1)如何获取复制粘贴的图片?
  • (2)如何获取拖拽的图片?
  • (3) 如何上传到七牛云?
  • (4) 如何生成用户上传凭据token?
  • 综上
  • 4. 最后附上参考资料链接与项目github地址

Was this helpful?

  1. Personal Works

1. 简单的Web图床

PreviousPersonal WorksNextCSS动画笔记

Last updated 5 years ago

Was this helpful?

一个[极简的Web图床应用]((

1.开发缘由

日常使用Vs Code编写markdown笔记与博客文章时,在文章中插入图片时发现非常不便

  • 使用本地文件编写相对路径---没法直接复制粘贴到其它地方

  • 使用第三方的图床---需要登录账号(还是放到自己"口袋"里放心)

  • vs code内置插件--- 诸多bug使用不方便

  • 喜欢折腾(真实)

2.效果预览

抛弃一切花里胡哨的,满足日常使用

静图

图片

动图

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) 如何上传到七牛云?

书写js方法

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?

书写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);

书写完成后运行token.js

node token.js

同级目录下生成token.txt文件,里面的内容即为所需的用户凭据

综上

利用上述所提到的知识即可搭建出这个简易的基于七牛云的web图床

4. 最后附上参考资料链接与项目github地址

参考文档

项目地址

图片

项目地址: ,附有详细的食用指南,从0到1

图片
图片
图片

参考:

参考

图片解释 1. 对象存储空间名称 bucket 2.Access Key和Secret Key

图片

我的 项目地址: 体验地址:

点击体验一把
github
qiniu-JavaScript-sdk文档
qiniu-nodejs-sdk文档
1. qiniu-JavaScript-sdk文档
2. qiniu-nodejs-sdk文档
Github
https://github.com/ATQQ/image-bed-qiniu
https://picker.sugarat.top/
https://picker.sugarat.top/)),支持复制粘贴与拖拽上传图片