React+react-dropzone+node.js实现图片上传的示例代码

  "compilerOptions": {       "outDir": "./public/",       "sourceMap": true,       "noImplicitAny": true,       "module": "commonjs",       "target": "es5",       "jsx": "react" ,      "noImplicitAny": false,      "suppressImplicitAnyIndexErrors": true  },  "files": [ "./views/home/main.tsx" ],  "exclude": [    "node_modules"  ]}

var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require("extract-text-webpack-plugin");var HtmlWebpackPlugin = require('html-webpack-plugin');var title = {  home: '首页',}module.exports = {  entry: {    home: [      'babel-polyfill',      './views/home/main.tsx'    ],    common: ['react','babel-polyfill']  },  output: {    path: path.join(__dirname, 'views/wap'),    filename: '[name].js',    chunkFilename: '[id].build.js?[chunkhash]',    publicPath: '/views/wap/',  },  module: {    loaders: [      {         test: //.tsx?$/,         loader: 'ts-loader'       },      {        test: //.(less|css)$/,        loader: ExtractTextPlugin.extract('style', 'css!less'),      },      {            test://.(js|jsx)?$/,       loader:'babel',       exclude:/node_modules/,       query:{compact:false,presets:['es2015','react','stage-0','stage-1','stage-2']}      },      {        test: //.(png|jpg|gif)?$/,        loaders: ['url?limit=8192&name=[name]_[sha512:hash:base64:7].[ext]'],      },      {        test: //.(eot|woff|ttf|svg)$/,        loader: 'file?limit=81920&name=[name]_[sha512:hash:base64:7].[ext]'      },    ]  },  resolve: {    root: ['node_modules'],    extensions: ['', '.js', '.jsx', '.html', '.json','.ts', '.tsx'],    modulesDirectories: ['node_modules'],    alias: {}  },  externals: {},  plugins: [    new webpack.DefinePlugin({      'process.env.NODE_ENV': '"production"'    }),    new webpack.HotModuleReplacementPlugin(),    new ExtractTextPlugin('[name].[contenthash:20].css'),    new webpack.optimize.UglifyJsPlugin({      compress: {warnings: false}    }),    new webpack.optimize.CommonsChunkPlugin('common', 'common.js'),      new HtmlWebpackPlugin(      {         title: "",         template: path.join(path.resolve(__dirname),'views/wap/myApp.html'), //模板文件         inject:'body',         hash:true,  //为静态资源生成hash值         minify:{  //压缩HTML文件          removeComments:false,  //移除HTML中的注释          collapseWhitespace:false  //删除空白符与换行符         }      }      )  ]};

import * as Dropzone from 'react-dropzone';<Dropzone  accept="image/jpeg, image/png"      onDrop={(accepted, rejected) => { this.setState({ accepted, rejected });this.drop(accepted[0].preview) }}      style={{width:"100%",height:"120px",background:"#f2f2f2","padding-top":'90px',"cursor":"pointer","box-sizing":"content-box"}} ></Dropzone>

drop(src : any) : any{    const that = this;    let img = src;    let image = new Image();    image.crossOrigin = 'Anonymous';    image.src = img;    image.onload = function(){      let base64 = that.getBase64Image(image);      that.upLoadImg({imgData:base64})    }}

getBase64Image(img :any) : string {    let canvas = document.createElement("canvas");    canvas.width = img.width;    canvas.height = img.height;    let ctx = canvas.getContext("2d");    ctx.drawImage(img, 0, 0, img.width, img.height);    let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();    let dataURL = canvas.toDataURL("image/"+ext);    return dataURL;}

async upLoadImg(params : object) : Promise<any>{    let res = await axios.post('http://localhost:3000/upLoadImg',params);}

var express = require('express');var router = express.Router();var rf = require('fs');var SetImg = require('./controller/uploadImg');var setImg = new SetImg;router.post('/upLoadImg',setImg.setUploadImg);module.exports = router;

var rf = require('fs');class SetImg {  setUploadImg(req, res, next) {    let imgData = req.body.imgData;    let base64Data = imgData.replace(/^data:image///w+;base64,/, "");    let dataBuffer = new Buffer(base64Data, 'base64');    let timer = Number( new Date() );    rf.writeFile("views/images/artCover"+timer+".png",dataBuffer, function(err) {      if(err) {       res.json({"code":400,"verson":false,"msg":err});      }else {       res.json({"code":100,"verson":true,"url":"views/src/common/images/artCover/"+timer+".png"});      }    });  }}module.exports = SetImg;

import * as React from 'react';import * as ReactDom  from 'react-dom';import * as Dropzone from 'react-dropzone';import * as axios from 'axios';import './main.less';declare var document;declare var Image;class ImgUpload extends React.Component<any,any> {  constructor(){    super()    this.state = {     accepted: [],     rejected: []    }  }  public drop(src : any) : any{    const that = this;    let img = src;    let image = new Image();    image.crossOrigin = 'Anonymous';    image.src = img;    image.onload = function(){      let base64 = that.getBase64Image(image);      console.log(base64)      that.upLoadImg({imgData:base64})    }  }  //转base64  public getBase64Image(img :any) : string {    let canvas = document.createElement("canvas");    canvas.width = img.width;    canvas.height = img.height;    let ctx = canvas.getContext("2d");    ctx.drawImage(img, 0, 0, img.width, img.height);    let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();    let dataURL = canvas.toDataURL("image/"+ext);    return dataURL;  }  public async upLoadImg(params : object) : Promise<any>{    let res = await axios.post('http://localhost:3000/upLoadImg',params);  }  render(){    const that = this;    let imgs;    if(this.state.accepted.length > 0){      imgs = (        <ul>          {this.state.accepted.map( (f) => {            return <img key={f.name} src={f.preview} />          })}        </ul>      )    }    return (      <div>        <div className="wrap">          <Dropzone          accept="image/jpeg, image/png"          onDrop={(accepted, rejected) => { console.log(accepted);console.log(rejected);this.setState({ accepted, rejected });this.drop(accepted[0].preview) }}          style={{width:"100%",height:"120px",background:"#f2f2f2","padding-top":'90px',"cursor":"pointer","box-sizing":"content-box"}}           >            <p className="upload">请添加主题图片</p>          </Dropzone>        </div>        <div className="show">{imgs}          </div>       </div>          )  }}ReactDom.render(  <ImgUpload />,  document.getElementById('app'))