import React, { PureComponent } from 'react';
//这里connect如果请求接口 必须要!
import { connect } from 'dva';
import {getAdList} from '../../axios';
import { Upload, Icon, message } from 'antd';
//import styles from './User.less'; 暂时用不到
//这块是使用connt获取数据的应该 不知道理解对不对
@connect( test => ({ test, loading }) => ({
//这行是把返回的数据test.data给了test
test : test.data,
loading: loading.models.list,
}))
class Test extends PureComponent {
state={
fileList:[]
}
getBase64=(img, callback)=>{
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
};
beforeUpload=async (file,imgName)=>{
const formData=new FormData();
formData.append("file",file);
formData.append("token","kkkkkk");
let imgUrl = '';
await this.getBase64(file,imageUrl => {
let imgAry = [imgName,imageUrl];
let obj = {};
obj[imgAry[0]] = imgAry[1];
this.setState(obj);
console.log(this.state[imgName]);
imgUrl=imageUrl;
if(imageUrl) {
var image = new Image();
image.onload = () => {
// var width = image.width;
// var height = image.height;
//var fileSize = image.fileSize;
// let a = ((9 / 16).toFixed(2));/*控制文件宽高比例*/
// let b = ((16 / 9).toFixed(2));
// let c = (width / height).toFixed(2);
// if ((c !== a) && (c !== b)) {
// message.error("图片宽高比例错误");
// this.setState({imageUrl: null,loading: false });
// }else{
// this.setState({imageUrl: imgUrl,loading: false });
// }
this.setState({imageUrl: imageUrl,loading: false });
};
image.src = imageUrl;
}
});
let isLt500KB = file.size / 1024 < 500;/*控制文件大小*/
if (!isLt500KB) {
message.error('文件大小因小于500KB!');
this.setState({imageUrl: null,loading: false });
}
};
handleChange = (info) => {
console.log(info);
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
this.getBase64(info.file.originFileObj, imageUrl => {
this.setState({
loading: false,
});
});
}
};
render() {
console.log(this.props);
const formData=new FormData();
/* function beforeUpload(file) {
console.log(file);
//const isJPG = file.type === 'image/jpeg';
// if (!isJPG) {
// message.error('You can only upload JPG file!');
// }
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isLt2M) {
// message.error('Image must smaller than 2MB!');
// }
formData.append("file",file);
formData.append("token","kkkkkk");
console.log(formData.get("token"));
//return isJPG && isLt2M;
}*/
const uploadButton = (
<div>
<Icon type={this.state.loading ? 'loading' : 'plus'} />
<div className="ant-upload-text">Upload</div>
</div>
);
const imageUrl = this.state.imageUrl;
return (
<Upload
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="/api/picUpload/face"
beforeUpload={this.beforeUpload}
data={()=>{
console.log(formData.get("token"));
console.log(formData.get("file"));
return formData;
}}
onChange={this.handleChange}
accept={".png,.jpg,.jpeg"}
>
{imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
</Upload>
);
}
}
export default Test;
ant上传图片 获取返回值中的图片路径 自用
最新推荐文章于 2022-06-20 17:43:00 发布