图床工具的实现-基础篇

图床工具的实现——基础一步一步教你写一个图床工具（Nodewidget）。教学开始前，我们需要准备：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，首先定义支持的图片格式constDEFAULT_ALLOW_FILE=["png","jpg"];定义好支持的图片格式后，我们开始搜索目录//fs模块，用于读取目录和文件constfs=require('fs');//path模块，用于解析和组装路径constpath=require('path');constDEFAULT_ALLOW_FILE=["png","jpg"];/***读取目录下的图片文件并收集到images*@param{*}entryentry*@param{*}imagesimagecollection*/functionreadDir(entry,images=[]){constdirInfo=fs.readdirSync（条目）；for(leti=0;ilocation.endsWith(allowScheme))){images.push(location);}}returnimages;}//定义检索入口文件夹（图片文件夹）conststaticDirPath=path.join(__dirname,'../..','images');constimages=readDir(staticDirPath);控制台日志（我年龄）；我们使用nodesrc/upload/index.js命令执行脚本，最后获取到的images是一个数组，里面包含了本地images下的所有图片文件路径，也就是我们需要的local_url/image_path集合现在我们开始最后一步，开始上传，阿里云oss提供了一个库——ali-oss，我们使用npm安装，然后我们importconstOSS=require("ali-oss");在头部然后我们根据云提供的阿里API，编写上传的代码//...//将Windows反斜杠路径转换为斜杠路径constslash=require('slash');constOSS=require("ali-oss");//...//这些配置参数在上一章已经讲解过，不再重复constclient=newOSS({"region":"","accessKeyId":"","accessKeySecret":"<你的配置>","bucket":"<你的配置>",});asyncfunctionupload(){for(leti=0;i