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>
)
}
}