antd #upload

import React from 'react'

import {Upload, Icon, message,Button } from 'antd'

import './index.scss';

import Axios from 'axios'

import { resolve } from 'path';

// import { resolve } from 'dns';

function getBase64(img, callback) {

const reader = new FileReader();

reader.addEventListener('load', () => callback(reader.result));

reader.readAsDataURL(img);

}

 

export default class Uploading extends React.Component{

constructor(props){

super(props)

}

state = {

loading: false,

imageUrl:''

};

handleChange = (info) => {

console.log('info-->', info)

// if (info.file.status === 'uploading') {

// this.setState({ loading: true });

// return;

// }

// if (info.file.status === 'done') {

// // Get this url from response in real world.

// getBase64(info.file.originFileObj, imageUrl => this.setState({

// imageUrl,

// loading: false,

// }));

// }

const isJPG = info.file.type === 'image/jpeg';

const isPNG = info.file.type === 'image/png';

if (!isJPG && !isPNG) {

message.error('仅支持JPG，JPEG，PNG');

}

const isLt1M = info.file.size / 1024 /1024 < 1;

if (!isLt1M) {

message.error('图片限制1M以下');

}

if (!((isJPG || isPNG) && isLt1M)) {

return false;

}

let formData = new window.FormData()

formData.append('file', info.file, info.file.name)

Axios({

headers: {

'Content-Type': 'multipart/form-data'

},

method: 'post',

data: formData,

url: 'http://192.168.5.14:8081/node/file_upload'

}).then(res => {

console.log('res--->', res)

console.log(11,this)

if (res.data.code === 200) {

let imgurl=res.data.result[0].photoBig

this.setState({

imageUrl:'http://192.168.5.14:8081/'+imgurl

})

}

}, err => {

console.log('err', err)

})

}

beforeUpload(file) {------------------------1.要么beforeUpload直接返回false,所有的验证前的操作和上传文件都在onChange事件里进行，这样upload插件有没有action都无所谓

------------------2.要么就是beforeUpload返回一个promise对象，进行异步校验，但是此时如果要自己手动上传就不用传action,否则就会进行2次上传，但是如果自己不写异步请求，也可以用它的action进行上传，但是没法拿到数据

return false

// console.log(file)

// return new Promise((resolve, reject) =>{

// console.log(222222)

// const isJPG = file.type === 'image/jpeg';

// const isPNG = file.type === 'image/png';

// if (!isJPG && !isPNG) {

// message.error('仅支持JPG，JPEG，PNG');

// }

// const isLt1M = file.size / 1024 /1024 < 1;

// if (!isLt1M) {

// message.error('图片限制1M以下');

// }

// if (!((isJPG || isPNG) && isLt1M)) {

// return false;

// }

// let formData = new window.FormData()

// formData.append('file', file, file.name)

// Axios({

// headers: {

// 'Content-Type': 'multipart/form-data'

// },

// method: 'post',

// data: formData,

// url: 'http://192.168.5.14:8081/node/file_upload'

// }).then(res => {

// console.log('res--->', res)

// console.log(11,this)

// if (res.data.code === 200) {

// let imgurl=res.data.result[0].photoBig

// this.setState({

// imageUrl:'http://192.168.5.14:8081/'+imgurl

// })

// resolve()

// }

// }, err => {

// console.log('err', err)

// })

// })

}

render(){

const uploadButton = (

<div className='uploadTit'>

<div>标题图片</div>

<div>426 x 240</div>

</div>

);

 

const imageUrl = this.state.imageUrl;

return(

<div className='upload'>

<div className='uploadJpg'>

{imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}

</div>

<Upload

name="file"//发到后台的文件参数名

className="avatar-uploader"

showUploadList={false}//是否展示uploadList

// action="http://192.168.5.14:8081/node/file_upload"//必选参数，上传的地址

// beforeUpload={this.beforeUpload.bind(this)}//上传文件的钩子

beforeUpload={this.beforeUpload}

onChange={this.handleChange}//上传文件改变时的状态

>

<Button type='primary' className='replacebtn222'>

上传文件图片

</Button><br/>

<p style={{marginTop:10}}>大小426 * 240像素，图片限制1M以下，仅支持JPG，JPEG，PNG</p>

</Upload>

 

 

 

</div>

)

 

}

}