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>

)

 

}

}