react + express / koa2 文件上传

前台代码 react + axios

import React, {Component} from 'react'
import axios from 'axios';

export default class Mycenter extends Component{

  constructor(){
    super()
    this.state = {

    }
    this.file = null;
  }
  
  clickUpload =()=>this.file.click()

  handleFileChange =()=>{

      let newfile = this.file.files[0];
      const formData = new FormData();
      formData.append('file', newfile,newfile.name);

      const config ={
        headers:{
          'Content-Type':'application/x-www-form-urlencoded'
        }
      }
      axios.post('http://localhost:8080/upfile/add', formData,config).then( res => {

        console.log(res, "：图片上传成功后返回")
      }).catch( err => console.log(err))
  }

  render(){

    return (
      <div className="profile_box">

        <a onClick={this.clickUpload}>选择文件</a>
        <input type="file" ref={ file => this.file = file} style={{display:'none'}}/>
        <button onClick={this.handleFileChange}>上传</button>

      </div>
    )
  }
}

react + antd( Upload组件 )

import React, {Component} from 'react'

import {Upload, message, Icon } from 'antd'
const Dragger = Upload.Dragger;

export default class Mycenter extends Component{

  state = {

  }
    
  handleChange = (info)=> {

    const status = info.file.status;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  }


  render(){

    const props = {
      name: 'file',
      action:'http://localhost:8080/upfile/add',
      // multiple: true,
      showUploadList: false,
      onChange: this.handleChange,
    };

    return (
      <div className="profile_box">

          <Dragger {...props}>
          <p className="ant-upload-drag-icon">
            <Icon type="inbox" />
          </p>
          <p className="ant-upload-text">Click or drag file to this area to upload</p>
          <p className="ant-upload-hint">
            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
            band files
          </p>
        </Dragger>

      </div>
    )
  }
}

express + multiparty 文件上传

const express= require('express');
const multiparty=require('multiparty')
const fs = require('fs');
const path= require("path");
const uuid=require('uuid')
const app=express();

//读取图片目录
app.use(express.static('public'))
//上传文件目录
app.use('/upload',express.static('upload'))

app.post('/adddata',function (req,res) {

    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
   
    const form = new multiparty.Form();
    //设置单文件大小限制 2M 
    form.maxFieldsSize = 2 * 1024 * 1024;
    form.uploadDir='upload'   

   
    form.parse(req,function (err,flields,files) {

        console.log(files, " :files")
        if(err){
            res.send({ msg: '文件上传失败:' }).end();
        }
        //拿到扩展名
        const extname = path.extname(files.file[0].originalFilename);
        //uuid生成 图片名称
        const nameID = (uuid.v4()).replace(/\-/g,'');
        const oldpath = path.normalize(files.file[0].path);

        //新的路径
        let newfilename = nameID+extname;
        var newpath =  './upload/'+newfilename;
        //改名
        fs.rename(oldpath,newpath,function(err){
            if(err){
       
                res.send({ msg: '文件上传失败:' }).end();
            }else{
                res.send({ msg: '文件上传成功:' }).end();
            }

            
            
        })


    })

})

app.listen(8090)

koa+ multer 文件上传

• router / upfile.js

let Router = require('koa-router')
const fileRouter = new Router()
const db = require('../mysql')
const path = require('path')
const uuid = require('uuid')
const fs = require('fs')

const multer=require('koa-multer')

//文件上传
var storage = multer.diskStorage({
    //文件保存路径
    destination: function (req, file, cb) {
      cb(null, 'upload/')
    },
    //修改文件名称
    filename: function (req, file, cb) {
      var fileFormat = (file.originalname).split(".");  //以点分割成数组，数组的最后一项就是后缀名
      cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
  })

  //加载文件配置
var upload = multer({ storage, });

fileRouter.post('/upfile/add',upload.single('file'),async(ctx,next)=>{
  

    let file = ctx.req.file;
    // console.log(file,"file")
    //拿到扩展名
    const extname = path.extname(file.originalname);
    //uuid生成图片名称
    const nameID = (uuid.v4()).replace(/\-/g,'');
    const oldpath = path.normalize(file.path);

    //新的路径
    let newfilename = nameID + extname;
    var newpath =  './upload/'+newfilename;
    //改名
    fs.rename(oldpath,newpath,function(err){
        // 改名失败
        if(err){
          ctx.body = {
            code:1,
            msg:'err',
            data:{}  
          }
        }
    })
    // 存储到服务器
    let ID = uuid.v4().replace(/-/g,'');
    const insertfile = `INSERT INTO upfiles (ID,src) VALUES('${ID}','${newfilename}')`
    const data = await db.query(insertfile)

    let resdata = data.code == 0?{ids:[ID]}:{};
    ctx.body = {
      code:0,
      msg:'ok',
      data:resdata,  
    }

   
  })

module.exports = fileRouter

• server.js 主文件

const koa = require('koa')
const bodyParser = require('koa-bodyparser');
const cors = require('koa2-cors') 
const staticFile = require('koa-static') 
const path = require('path')
const multer = require('koa-multer')
const file_router = require('./router/upfile')

const server= new koa()

server.use(cors());//解决跨域
server.use(bodyParser());   //接受http请求数据
server.use(staticFile(path.join(__dirname + '/static/'))) // 配置默认访问地址

  //文件保存路径
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'upload/')
  },
  //修改文件名称
  filename: function (req, file, cb) {
    var fileFormat = (file.originalname).split(".");  //以点分割成数组，数组的最后一项就是后缀名
    cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
})

//加载文件配置
var upload = multer({ storage, });

server
  .use(file_router.routes())   // 上传文件
  .use(router.allowedMethods());


server.listen(8080)

• koa 常用中间件

koa-router // 路由
koa-static // 静态目录
koa2-cors // 解决跨域
koa-views // 模板引擎
koa-jwt //生成 --- 解密 tocken
koa-session // session 会话存储
koa-logger //日志
koa-compress // 压缩
koa-convert // 版本兼容