本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片。当然是用typescript需要提前下载相应的模块，在这里就不依依介绍了。

第一步，配置tsconfig.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"
  ]
}

2.配置webpack

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  //删除空白符与换行符
         }
      }
      )
  ]
};

3.react-dropzone

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>

accept:表示图片的接受类型

onDrop代表图片加载以后触发

accepted:表示加载图片成功后相关信息，打印出来如下:

rejected：表示加载图片失败后，相关信息：

4.图片处理、上传

新建一个drop方法在触发onDrop后。

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})
    }
}

在这里我们使用base64传递，所以我们需要把图片转成base64，定义getBase64Image处理

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);
}

5.node部分

router/index.js

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;

./controller/uploadImg.js

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')
)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# nodejs  # react  # 图片上传  # nodejs实现图片上传  # nodejs上传图片  # Node.js HTTP服务器中的文件、图片上传的方法  # Node.js + express实现上传大文件的方法分析【图片、文本文件】  # 简单实现node.js图片上传  # node.js实现多图片上传实例  # 如何使用 Node.js 实现一个上传图片接口  # 在这里  # 相关信息  # 加载  # 的是  # 上传  # 就不  # 会用  # 首页  # 上传图片  # 转成  # 大家多多  # 移除  # 新建一个  # 格式转换  # 打印出来  # 后端  # 图片处理  # 换行符  # amp  # limit 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： LinuxShell函数封装方法_脚本复用设计思路【教程】  教你用AI润色文章，让你的文字表达更专业  高性能网站服务器配置指南：安全稳定与高效建站核心方案  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  js代码实现下拉菜单【推荐】  济南网站建设制作公司,室内设计网站一般都有哪些功能？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  想要更高端的建设网站，这些原则一定要坚持！  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  百度浏览器如何管理插件 百度浏览器插件管理方法  如何在建站之星网店版论坛获取技术支持？  开心动漫网站制作软件下载,十分开心动画为何停播？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  如何在建站之星绑定自定义域名？  如何在万网自助建站平台快速创建网站？  手机软键盘弹出时影响布局的解决方法  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  长沙做网站要多少钱,长沙国安网络怎么样？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  如何在IIS中新建站点并解决端口绑定冲突？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Linux系统运维自动化项目教程_Ansible批量管理实战  如何快速登录WAP自助建站平台？  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  Laravel怎么实现模型属性的自动加密  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  网站页面设计需要考虑到这些问题  大型企业网站制作流程,做网站需要注册公司吗？  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  Linux安全能力提升路径_长期防护思维说明【指导】  如何在VPS电脑上快速搭建网站？  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何挑选高效建站主机与优质域名？  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  Linux网络带宽限制_tc配置实践解析【教程】  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  如何在自有机房高效搭建专业网站？  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  如何彻底删除建站之星生成的Banner？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？