react+antd+feathers实现前后端简单的文件上传下载

Posted 2021-04-24 IT小精英

这段时间做了一个上传下载文件的项目，前后端代码都是自己写的，用了一些很方便的工具，记录一下。(使用的是单文件上传)可以上传100M以内的大文件，亲测没问题。

前段用的框架是react和ant design，后端用的feathersJS。

前段文件上传用的是ant design自带的组件，Upload.

render() {
  let that = this;
  const prop= {
    name: 'uri',  //名字要跟后台对应
    action: "http://192.168.137.253:3030/uploads",
    // headers:{'Content-Type':'multipart/form-data'},
    onChange(info) {
      let file = info.fileList[0];
      const fileSize = (file.size / (1024 * 1024)).toFixed(2);  //获得文件大小
      const name = file.name;  //获得文件名      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
        that.props.getSize(fileSize,name)  //传给父级
      }      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };  return (
    <Upload {...prop}>
      <Button>
        <Icon type="upload" /> Click to Upload
      </Button>
    </Upload>
  );
}

 

不用Ant design的话，可以使用FileRender.

importfile = (ev) => {  var _this = this;  var file = ev.target.files[0];  if (window.FileReader) {    var fr = new FileReader();    if (window.FileReader) {      var fr = new FileReader();
      fr.addEventListener('load', function () {        var upload = uploadService
          .create({uri: fr.result}) //跟后台名字对应
          .then(function(response){            // success
          });
      }, false);
      fr.readAsDataURL(file);
    }
  }
}

 

后端需要导入multer插件，

const multer = require('multer');

首先要注意的是，feathers是基于express开发的，它对接收的文件大小有限制，我们需要更改一下，

app.use(express.json({limit: '100mb'}));app.use(express.urlencoded({ extended: true, limit: '100mb' }));

 

我这边上传文件有页面传入和接口传入两种，下载文件就是接口下载；

先说上传文件，upload是页面的上传，importfile是接口上传

先要配置multer，

新建multerUtil.js,

const  multer=require('multer');const storage = multer.diskStorage({  //设置上传后文件路径，uploads文件夹会自动创建。
  destination: function (req, file, cb) {
    cb(null, './src/uploads')
  },  //给上传文件重命名，获取添加后缀名
  filename: function (req, file, cb) {    let fileFormat = file.originalname;
    cb(null, fileFormat)
  }
});// //添加配置文件到muler对象。const upload = multer({
  storage: storage
});//如需其他设置，请参考multer的limits,使用方法如下。//var upload = multer({//    storage: storage,//    limits:{}// });//导出对象module.exports = upload;

具体如何配可以看这个http://cnodejs.org/topic/564f32631986c7df7e92b0db

再建一个testController.js文件，导入multerUtil.js

const muilter = require('./multerUtil');//multer有single()中的名称必须是表单上传字段的name名称。const upload=muilter.single('uri');
exports.dataInput = function (req, res) {
  upload(req, res, function (err) {    //添加错误处理
    if (err) {      return  console.log(err);
    }    //文件信息在req.file或者req.files中显示。
    //console.log(req);
    res.send(200);
  });
}
  //如果还需要其他的服务，可以把app传过来exports.fileInput = function (app) {  return function (req, res) {
    upload(req, res, function (err) {      //添加错误处理
      if (err) {        return console.log(err);
      }      //文件信息在req.file或者req.files中显示。
      // console.log(req.file);
      if (req.method === 'POST') {        //这里面可以对数据库进行操作
        app.service('mvc-filedata').find()
          .then(function (result, err) {            if (err) throw err;
            //这里写需要的操作
            res.send(200);
          });
      }      else {...}
    });
  }
};

写完后，只需要回到app.js把文件引入就好

app.post('/uploads',testController.dataInput);
app.post('/importfile',testController.fileInput(app));

以上，上传的代码就写完了，下面是下载的代码

找到src/middleware文件夹，建立文件export-file.js;

var fs = require('fs');var path = require('path');module.exports =function (app) {  return function (req, res, next) {    if (req.method === 'GET') {      // console.log(req.url.split("/")[1],"结束");
      app.service('mvc-filedata').find({query: { address:req.url.split("/")[1] }})
        .then(function (result, err) {          if (err) throw err;          console.log(result.data);          var file = 'F:/work/VMC/VMC-services/service-host/src/uploads/'+ result.data[0].address; //文件的地址
          res.download(file);
        });
    }    else {
    }
  };
};

再回到APP,引入即可

const middlewarefilexport = require('./middleware/export-file');

app.use('/exportfile',middlewarefilexport(app));

 

以上就是前后端文件的上传下载的全部代码