热门标签 | 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 颗我将马上尽快更新进阶篇,教你如何解耦组件,创建一个非技术人员也能使用的图床工具。


推荐阅读
  • 为了在Hadoop 2.7.2中实现对Snappy压缩和解压功能的原生支持,本文详细介绍了如何重新编译Hadoop源代码,并优化其Native编译过程。通过这一优化,可以显著提升数据处理的效率和性能。此外,还探讨了编译过程中可能遇到的问题及其解决方案,为用户提供了一套完整的操作指南。 ... [详细]
  • CTF竞赛中文件上传技巧与安全绕过方法深入解析
    CTF竞赛中文件上传技巧与安全绕过方法深入解析 ... [详细]
  • 2018年9月21日,Destoon官方发布了安全更新,修复了一个由用户“索马里的海贼”报告的前端GETShell漏洞。该漏洞存在于20180827版本的某CMS中,攻击者可以通过构造特定的HTTP请求,利用该漏洞在服务器上执行任意代码,从而获得对系统的控制权。此次更新建议所有用户尽快升级至最新版本,以确保系统的安全性。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • AppFog 是一个基于 CloudFoundry 的多语言 PaaS(平台即服务)提供商,允许用户在其平台上轻松构建和部署 Web 应用程序。本文将通过详细的图文步骤,指导读者如何在 AppFog 免费云平台上成功部署 WordPress,帮助用户快速搭建个人博客或网站。 ... [详细]
  • Python与R语言在功能和应用场景上各有优势。尽管R语言在统计分析和数据可视化方面具有更强的专业性,但Python作为一种通用编程语言,适用于更广泛的领域,包括Web开发、自动化脚本和机器学习等。对于初学者而言,Python的学习曲线更为平缓,上手更加容易。此外,Python拥有庞大的社区支持和丰富的第三方库,使其在实际应用中更具灵活性和扩展性。 ... [详细]
  • 从无到有,构建个人专属的操作系统解决方案
    操作系统(OS)被誉为程序员的三大浪漫之一,常被比喻为计算机的灵魂、大脑、内核和基石,其重要性不言而喻。本文将详细介绍如何从零开始构建个人专属的操作系统解决方案,涵盖从需求分析到系统设计、开发与测试的全过程,帮助读者深入理解操作系统的本质与实现方法。 ... [详细]
  • 在《Linux高性能服务器编程》一书中,第3.2节深入探讨了TCP报头的结构与功能。TCP报头是每个TCP数据段中不可或缺的部分,它不仅包含了源端口和目的端口的信息,还负责管理TCP连接的状态和控制。本节内容详尽地解析了TCP报头的各项字段及其作用,为读者提供了深入理解TCP协议的基础。 ... [详细]
  • 本文深入探讨了如何利用Maven高效管理项目中的外部依赖库。通过介绍Maven的官方依赖搜索地址(),详细讲解了依赖库的添加、版本管理和冲突解决等关键操作。此外,还提供了实用的配置示例和最佳实践,帮助开发者优化项目构建流程,提高开发效率。 ... [详细]
  • Squaretest:自动生成功能测试代码的高效插件
    本文将介绍一款名为Squaretest的高效插件,该工具能够自动生成功能测试代码。使用这款插件的主要原因是公司近期加强了代码质量的管控,对各项目进行了严格的单元测试评估。Squaretest不仅提高了测试代码的生成效率,还显著提升了代码的质量和可靠性。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 今天我开始学习Flutter,并在Android Studio 3.5.3中创建了一个新的Flutter项目。然而,在首次尝试运行时遇到了问题,Gradle任务 `assembleDebug` 执行失败,退出状态码为1。经过初步排查,发现可能是由于依赖项配置不当或Gradle版本不兼容导致的。为了解决这个问题,我计划检查项目的 `build.gradle` 文件,确保所有依赖项和插件版本都符合要求,并尝试更新Gradle版本。此外,还将验证环境变量配置是否正确,以确保开发环境的稳定性。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
  • 技术日志:Ansible的安装及模块管理详解 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
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社区 版权所有