热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

图床工具的实现基础篇

图床工具的实现-基础篇在上一章,我们介绍了图床工具(上传组件)的使用,这一章,我们来解析图床工具的实现,手把手教你写一个图床工具(Node小工具)。在教学开始前,我们需要准备:No
图床工具的实现-基础篇

在上一章,我们介绍了图床工具(上传组件)的使用,这一章,我们来解析图床工具的实现,手把手教你写一个图床工具(Node 小工具)。

在教学开始前,我们需要准备:

  • Node运行环境:图床上传工具使用 Node 开发

我们希望你掌握以下知识:

(以下知识也可以跳过,直接开始学习本教程;掌握是为了更好的理解)

  • es6 基本语法
  • fs 模块(Node 核心模块)
  • path 模块(Node 核心模块)

我们的基本目标

  • 对基本的文件格式进行限制;
  • 可指定上传目录,完成本地目录与远程目录映射;
  • 图片上传功能;

我们的进阶目标:

  • 将上传组件解耦,做成可配置项;
  • 将上传组件制作成图床工具,将配置与组件解耦,由外部实现调用;
  • 提供 windows 与 mac 双平台的脚本,使非技术人员可以通过该脚本配置公司静态资源;(如 banner 图、广告图)

(以下代码实现保存在 插件合集 中的 demo 目录下)

基本目标

我们的第一个目标是可指定上传目录,完成本地目录与远程目录映射,我们需要完成这个目标的话,我们需要有一个本地目录,所以我们在根目录下新建一个本地目录,取名为 images,我们再预设置一些目录及图片文件,具体如下

《图床工具的实现-基础篇》

现在我们的目标是要将本地目录的图片文件上传至远程目录,我们假设本地目录地址为 local_url,远程目录为 remote_url, 那么本地目录文件就是 local_url/images/blogs/plugins/upload/1.png,我们需要将该目录上传到远程目录的 remote_url/images/blogs/plugins/upload/1.png

所以我们第一步就是需要解析本地目录,并且将本地目录的图片文件都解析出来。

我们新建 src/upload/index.js,先定义支持的图片格式

const DEFAULT_ALLOW_FILE = ["png", "jpg"];

定义好了支持的图片格式后,我们开始对目录进行检索

// fs 模块,用于读取目录与文件
const fs = require('fs');
// path 模块,用于解析和拼装路径
const path = require('path');
const DEFAULT_ALLOW_FILE = ["png", "jpg"];
/**
* 读取目录下的图片文件,收集在 images 中
* @param {*} entry 入口
* @param {*} images 图片集合
*/
function readDir(entry, images = []) {
const dirInfo = fs.readdirSync(entry);
for (let i = 0; i const item = dirInfo[i];
// 拼装出文件/文件夹的路径
const location = path.join(entry, item);
const isDir = fs.statSync(location).isDirectory();
// 如果为文件夹则继续递归向下查询
if (isDir) {
readDir(location, images);
// 判断是否为所允许的图片格式
} else if (DEFAULT_ALLOW_FILE.some(allowScheme => location.endsWith(allowScheme))) {
images.push(location);
}
}
return images;
}
// 定义检索的入口文件夹( images 文件夹)
const staticDirPath = path.join(__dirname, '../..', 'images');
const images = readDir(staticDirPath);
console.log(images);

我们使用 node src/upload/index.js 命令执行该脚本,最后检索出来的 images 是个数组,包含了本地 images 下所有的图片文件路径,也就是我们需要的 local_url/image_path 集合。

现在我们开始最后一步,开始上传,阿里云 oss 提供了一个库 —— ali-oss,我们使用 npm 进行安装,然后我们在头部导入

const OSS = require("ali-oss");

然后我们根据阿里云提供的 API,编写上传的代码

//...
// Convert Windows backslash paths to slash paths
const slash = require('slash');
const OSS = require("ali-oss");
//...
// 这些配置参数在上一章已经进行说明,不再复述
const client = new OSS({
"region": "",
"accessKeyId": "",
"accessKeySecret": "",
"bucket": "",
});
async function upload() {
for (let i = 0; i // slash 是为了兼容 windows 平台的路径划分符为 \ 的特性
const local_url = slash(images[i]);
// 阿里云 OSS 目标文件名
// local_url.split() 是为了去除本地目录的前缀
const remote_url = `images${local_url.split(staticDirPath)[1]}`;
// 按顺序依次上传文件
const result = await client.put(remote_url, local_url)
console.log(`${result.url} 上传成功`);
}
console.log("所有文件上传成功");
}
upload();

我们使用 node src/upload/index.js 命令执行该脚本,下面可以看到执行结果(我的目录与教学的目录不同,所以执行的命令也不一致,可到该地址查看 我的源码)
《图床工具的实现-基础篇》

至此,我们基本目标已经实现,进阶目标希望是由读者亲自完成,也算是对 Node 的一个练习巩固。

喜欢的话给一颗 star 吧(图床上传工具和博文均属于原创)。

Star 超过 5 颗我将马上尽快更新进阶篇,教你如何解耦组件,创建一个非技术人员也能使用的图床工具。


推荐阅读
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 重要知识点有:函数参数默许值、盈余参数、扩大运算符、new.target属性、块级函数、箭头函数以及尾挪用优化《深切明白ES6》笔记目次函数的默许参数在ES5中,我们给函数传参数, ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 字节码开发笔记:深入解析与应用技巧 ... [详细]
  • WinMain 函数详解及示例
    本文详细介绍了 WinMain 函数的参数及其用途,并提供了一个具体的示例代码来解析 WinMain 函数的实现。 ... [详细]
  • 单片微机原理P3:80C51外部拓展系统
      外部拓展其实是个相对来说很好玩的章节,可以真正开始用单片机写程序了,比较重要的是外部存储器拓展,81C55拓展,矩阵键盘,动态显示,DAC和ADC。0.IO接口电路概念与存 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 在Delphi7下要制作系统托盘,只能制作一个比较简单的系统托盘,因为ShellAPI文件定义的TNotifyIconData结构体是比较早的版本。定义如下:1234 ... [详细]
  • 题目《BZOJ2654: Tree》的时间限制为30秒,内存限制为512MB。该问题通过结合二分查找和Kruskal算法,提供了一种高效的优化解决方案。具体而言,利用二分查找缩小解的范围,再通过Kruskal算法构建最小生成树,从而在复杂度上实现了显著的优化。此方法不仅提高了算法的效率,还确保了在大规模数据集上的稳定性能。 ... [详细]
  • 在处理大规模数据数组时,优化分页组件对于提高页面加载速度和用户体验至关重要。本文探讨了如何通过高效的分页策略,减少数据渲染的负担,提升应用性能。具体方法包括懒加载、虚拟滚动和数据预取等技术,这些技术能够显著降低内存占用和提升响应速度。通过实际案例分析,展示了这些优化措施的有效性和可行性。 ... [详细]
author-avatar
林海书6758
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有