用webpack搭建相关环境,如需要参考Webpack4+React+Typescript搭建开发环境
安装客户端所需包
1.用于发送请求,可自行选择
npm install --save request
npm install --save request-promise-native
开始编写客户端上传文件代码
1.首先,用递归的方式获取到指定要上传得文件夹下得文件,需要用到node.js的相关模块
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对象
//要读取的文件路径
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 --save
app.js
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.js
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地址
效果如下图
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。