dropzone+node.js实现图片上传的示例代码(2)

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=https://www.jb51.net/{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') )