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

本文将会用type script react-drop zone express。射流研究…实现前后端上传图片。当然是用以打字打的文件需要提前下载相应的模块，在这里就不依依介绍了。

第一步，配置tsconfig.js

编译选项' : { ' OutDir ' : ' ./public/'，' sourceMap': true，' noImplicitAny': true，' module': 'commonjs '，' target': 'es5 '，' jsx': 'react '，' noImplicitAny': false，' suppresimplicantindicerors ' : true '，' files': [./view/home/main。tsx ']，' exclude ' :[' node _ modules ']} 2 .配置webpack

var path=require(' path ')；var web pack=require(' web pack ')；var extext plugin=require(' ext-text-web pack-plugin ')；var HTMlWebPackplugin=require(' HTMl-web pack-plugin ')；var title={ home: '首页，}模块。exports={ entry : { home : [' babel-poly fill '，' ./view/home/main。tsx ']，common: ['react '，' babel-poly ill ']}，输出： { path : path。join(_ dirname，' view/WAP ')，filename: '[name].js '，chunkfilename : '[id]。建造。js？[chunkhash]'，公共路径： '/view/WAP/'，}，模块： {加载器： [{ test :/\ .tsx？$/，loader: 'ts-loader' }，{ test: /\ .（减|css)$/，加载程序： extractextplugin。提取(' 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]_[sha 512:拥有H3 3360基地64:7].[ext]']，}，{ test: /\ .(eot|woff|ttf|svg)$/，loader: '文件？limit=81920 name=[name]_[sha 512: hash : base 64:7].[ext]' }，] }，解析： { root :[' node _ modules ']，extension s 3360[' '，' .js '，' .jsx '，' .html '，' .json '，' .ts '，' .tsx']，模块目录：[' node _ modules ']，alias: {}，externals: {}，plugins: [ new webpack .definepreplugin({ ' process。ENV。node _ ENV ' : ' '生产' ' })，新网络包.HotModuleReplacementPlugin()，新的extplugin('[name]).[contenthash :20]1 .css ')，新的网络包。优化。uglifyjsplugin({ compression : { warning : false } })，新的网络包。优化。commonschunk插件(' common '，' common.js ')，新的html web pack plugin({ title : ' '，模板：路径。join(路径。resolve(_ dirname)，' view/WAP/myapp。html ')，//模板文件注入物： '身体，具有：路径，//为静态资源生成混杂值minify:{ //压缩超文本标记语言文件removeComments:false，//移除超文本标记语言中的注释collapseWhitespace:false //删除空白符与换行符} } ) ]};3 .反应区

从“反应-下降区”导入*作为DropzoneDropzone accept='image/jpeg，image/png' onDrop={(接受，拒绝)={ this . SetState({ 0接受，拒绝});this.drop(已接受[0]。预览)}}样式={{width:'100% '，height:'120px '，background:'#f2f2f2 '，' padding-top':'90px '，' cursor':'pointer '，' box-size ' : ' content-box ' }/Dropzoneaccept 3360表示图片的接受类型

onDrop代表图片加载以后触发

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

被拒绝：表示加载图片失败后，相关信息：

4.图片处理、上传

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

drop(src : any): any { const=this；让img=src让Image=new Image()；image.crossOrigin='匿名；image.src=imgimage。onload=function(){ let base64=that。getbase64图像(image)；那个。uploadimg({ img data : base64 })} }在这里我们使用base64传递，所以我们需要把图片转成base64，定义getBase64Image处理

getbase64图像(img : any):字符串{让画布=文档。创建元素(“画布”)；帆布。宽度=img。宽度；帆布。高度=img。身高；让CTX=画布。get context(' 2d ')；ctx.drawImage(img，0，0，img.width，img。高度)；让ext=img。src。子串(img。src。LastIndexof(' . ')) 1).toLowerCase()；让dataURL=画布。todaytaul(' image/' ext)；返回数据网址；}最终返回的是处理后图片的地址，然后上传

异步上传(参数：对象): promise ny { let RES=wait axios。post(' http://localhost :3000/upLoadImg '，params)；}5 .节点部分

路由器/索引。射流研究…

var express=require(' express ')；定义变量路由器快递.路由器();var rf=必需(“fs”)；var SetImg=require(' ./controller/uploadImg’)；var setImg=new setimgluer . post('/upLoadImg '，setImg。setuploadimg)；module.exports=路由器；/controller/uploadImg.js

var rf=必需(“fs”)；类SetImg { setUploadImg(req，res，next){让Img数据=req。尸体。img数据；让base 64数据=imgdata.replace(/^data:image\/\w；base64，/，' ')；让数据缓冲器=新缓冲区(base64Data，' base64 ')；让计时器=数字（新日期());' rf.writeFile('视图/图像/艺术封面'定时器。png '，dataBuffer，function(err){ if(err){ RES . JSON({ ' code ' :400，' verson':false，' msg ' : err })；}else { res.json({'code':100，' verson':true，' URL ' : ' view/src/common/images/ARt cover/' timer ' .png ' })；} });} } module.exports=SetImg拿到图片后先进行格式转换，然后将图片写入到本地，返回图片路径。

从"反应"中导入*作为反应；从“反应世界”导入*作为ReactDom从“反应-下降区”导入*作为Dropzone从“axios”导入*作为axios"进口"。/main。“少”；申报定义变量文件；声明风险值图像；类ImgUpload扩展了做出反应.Componentany，any { constructor(){ super()}这个。state={接受：[]，拒绝：[]} } public drop(src : any): any { const=this；让img=src让Image=new Image()；image.crossOrigin='匿名；image.src=imgimage。onload=function(){ let base64=that。getbase64图像(image)；控制台。记录(base64)。uploadimg({ img data : base64 })}//转base64 public getbase64 image(img : any): string { let canvas=document。create element(' canvas ')；帆布。宽度=img。宽度；帆布。高度=img。身高；让CTX=画布。get context(' 2d ')；ctx.drawImage(img，0，0，img.width，img。高度)；让ext=img。src。子串(img。src。LastIndexof('。')) 1).toLowerCase()；让dataURL=画布。todaytaul(' image/' ext)；返回数据网址；}公共异步upLoadImg(参数：对象): Promise ny { let RES=wait axios。post(' http://localhost :3000/upLoadImg '，params)；} render(){ const=this；让imgsif(这个。国家。接受。长度0){ imgs=(ul { this。国家。接受。map((f)={ return img key={ f . name } src={ f . preview }/})}/ul)} return(div div class name=' wrap ' Dropzone accept=' image/JPEG，image/png' onDrop={(接受，拒绝)={ console.log(接受);console.log(已拒绝);this . setstate({ 0接受，拒绝});this.drop(已接受[0]。preview)} } style={ { width : ' 100% '，height:'120px '，background:'#f2f2f2 '，' padding-top':'90px '，' cursor':'pointer '，' box-size ' : ' content-box ' } } p class name=' upload '请添加主题图片/p/Dropzone/div类名=' show ' { imgs }/div/div)} } react DOM。render(ImgUpload/，document.getElementById('app ')以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。