用webpack搭建相关环境,如须要参考Webpack4+React+Typescript搭建开发环境
安装客户端所需包
1.用于发送请求,可自行选择node
npm install --save request npm install --save request-promise-native
开始编写客户端上传文件代码
1.首先,用递归的方式获取到指定要上传得文件夹下得文件,须要用到node.js的相关模块webpack
function getFiles(dir: string, files_: string[]) { files_ = files_ || []; let files = fs.readdirSync(dir); //同步的方向读取dir下的所有文件 for (let i in files) { let name = dir + '/' + files[i]; if (fs.statSync(name).isDirectory())//是文件夹,继续遍历 getFiles(name, files_); else files_.push(name); } return files_; }
2.建立formdata对象git
//要读取的文件路径 let dir = path.resolve(__dirname, "../../dist"); let files = getFiles(dir, []); let formData: any = {}; for (let f of files) { //存储为流的方式 formData[f.substr(dir.length + 1)] = fs.createReadStream(f); } //须要请求的路径 let url = `http://www.xxxxx.online:3000/upload`; rq.post({ url, formData }, function optionalCallback(err, httpResponse, body) { if (err || !body || JSON.parse(body)['success'] !== "ok") return console.error('部署失败!', err); else { console.info(`部署成功!`); } });
以上是客户端请求须要的代码,能够根据本身的实际须要进行调整.接下来写服务端的代码.
除了用到express外,还用了multer来上传代码
npm i multer --savegithub
app.jsweb
var express = require('express'); var path = require('path'); var indexRouter = require('./Routes/route'); var app = 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('listening on port 3000!'); })
//路由
route.jsexpress
const express = require('express'); const path = require('path'); const fs = require('fs'); const router = express.Router(); const storage = require('../Utility/utility').storage; // const createFolder = require('../Utility/utility').createFolder; var multer = require('multer'); // 使用硬盘存储模式设置存放接收到的文件的路径以及文件名 exports.storage = multer.diskStorage({ destination: function (req, file, cb) { // 接收到文件后输出的保存路径(若不存在则根据须要是否须要建立,这里保存在ec2项目文件同级目录下) cb(null, '../'); }, filename: function (req, file, cb) { // 将保存文件名设置为 时间戳 + 文件原始名,好比 151342376785-123.jpg cb(null, file.originalname); } }); // 建立 multer 对象 var upload = multer({ storage: storage }); //上传 router.post('/upload', function (req, res, next) { let filePath = path.resolve(__dirname, '../'); console.log('filePath: ', filePath); fs.readdir(filePath, (err, files) => { if (!err) { //由于build文件会根据项目更改而改变,因此先删除旧的bundle文件 files.forEach(f => { let tmpPath = path.join(filePath, f) if (f.indexOf("bundle.js") !== -1) fs.unlink(tmpPath, e => { }); }) } else { res.send({ success: "no" }) } }); //上传文件 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地址npm
效果以下图json