1

用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地址

效果如下图
图片描述

图片描述
图片描述


ZoeLee
104 声望4 粉丝

不忘初心