使用webpack搭建相关环境。如果需要参考Webpack4+React+Typescript搭建开发环境,安装客户端需要的包1.发送请求可以选择npminstall--saverequestnpminstall--saverequest-promise-native到开始编写客户端上传文件代码1.首先使用递归的方法获取指定文件夹下的待上传文件。需要用到node.js相关模块函数getFiles(dir:string,files_:string[]){files_=files_||[];让files=fs.readdirSync(dir);//同步读取dir下的所有文件for(letiinfiles){letname=dir+'/'+files[i];if(fs.statSync(name).isDirectory())//是文件夹,继续遍历getFiles(name,files_);否则files_.push(名称);}returnfiles_;}2.创建formdata对象//读取文件路径letdir=path.resolve(__dirname,"../../dist");letfiles=getFiles(dir,[]);letformData:any={};for(letfoffiles){//存储为流的方式formData[f.substr(dir.length+1)]=fs.createReadStream(f);}//需要请求的路径leturl=`http://www.xxxxx.online:3000/upload`;rq.post({url,formData},functionoptionalCallback(err,httpResponse,body){if(err||!body||JSON.parse(body)['成功']!=="ok")returnconsole.error('部署失败!',err);else{console.info(`部署成功!`);}});以上是客户端请求需要的代码,大家可以根据自己的实际需要进行调整。接下来,编写服务器端代码。除了使用express,还使用multer上传代码npmimulter--saveapp.jsvarexpress=require('express');varpath=require('path');varindexRouter=require('./Routes/route');varapp=express();app.all('*',(req,res,next)=>{res.header("Access-Control-Allow-Origin","*");res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS');res.header("Access-Control-Allow-Headers","X-Requested-With");res.header('Access-Control-Allow-Headers','Content-Type');res.header('Access-Control-Allow-Credentials',true);next();})//输出服务器记录app.use(express.json());app.use(express.urlencoded({extended:false}));app.use(express.static(path.join(__dirname,'public')));app.use('/',indexRouter);app.listen(3000,()=>{console.log('监听3000端口!');})//路由route.jsconstexpress=require('express');常量路径=要求ire('path');constfs=require('fs');constrouter=express.Router();conststorage=require('../Utility/utility').storage;//constcreateFolder=require('../Utility/utility').createFolder;varmulter=require('multer');//使用硬盘存储方式设置接收文件的路径和文件名exports.storage=multer.diskStorage({destination:function(req,file,cb){//保存接收到文件后的输出路径(如果不存在,根据需要创建,并保存在ec2工程文件的同级目录下)cb(null,'../');},filename:function(req,file,cb){//设置保存的文件名为时间戳+原文件名,如151342376785-123.jpgcb(null,file.originalname);}});//创建multer对象varupload=multer({storage:storage});//上传router.post('/upload',function(req,res,next){letfilePath=path.resolve(__dirname,'../');console.log('filePath:',filePath);fs.readdir(filePath,(err,files)=>{if(!err){//因为构建文件会根据项目变化,先删除旧的bundlefilesfiles.forEach(f=>{lettmpPath=path.join(filePath,f)if(f.indexOf("bundle.js")!==-1)fs.unlink(tmpPath,e=>{});})}else{res.send({成功:"否"})}});//上传文件upload.any()(req,res,err=>{if(err)res.send({success:"no"});else{console.log("上传成功,上传文件数在"+filePath+":"+req.files.length)res.send({success:"ok"});}})});module.exports=router;将服务器文件上传到虚拟服务器,并运行node.js。github地址的效果如下图所示
