本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片。当然是用typescript需要提前下载相应的模块，在这里就不依依介绍了。
第一步，配置tsconfig.js@H_502_4@
2.配置webpack@H_502_4@
首页',}
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@H_502_4@
accept:表示图片的接受类型
onDrop代表图片加载以后触发
accepted:表示加载图片成功后相关信息，打印出来如下:
rejected：表示加载图片失败后，相关信息：
4.图片处理、上传@H_502_4@
新建一个drop方法在触发onDrop后。
在这里我们使用base64传递，所以我们需要把图片转成base64，定义getBase64Image处理
5.node部分@H_502_4@
router/index.js
./controller/uploadImg.js
拿到图片后先进行格式转换，然后将图片写入到本地，返回图片路径。
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,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
let res = await axios.post('http://localhost:3000/upLoadImg',params);
}
render(){
const that = this;
let imgs;
if(this.state.accepted.length > 0){
imgs = (
-
{this.state.accepted.map( (f) => {
return
