看别人的代码也是好的
多学习嘛
以下两种方法antd上传限制只能上传图片
用 getValueFromEvent: this.normFile,控制
<FormItem {...formItemLayout} label="客房图片" colon={false}>
<div className="clearfix">
{getFieldDecorator('pic',
{
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
initialValue: info && info.img_path,
})(
<Upload
accept="image/*"
action="/admin/Media/upLoad"
headers={{authorization: getAdminInfo()}}
listType="picture-card"
onPreview={this.handlePreview}
onChange={this.handleChange}
>
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
</Upload>,
)}
<Modal visible={previewVisible} footer={null} onCancel={this.picCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
</FormItem>
normFile = (e) => {
// 检查图片类型
// 只能上传三种图片格式
const isJPG = e.file.type === 'image/jpeg';
const isPNG = e.file.type === 'image/png';
const isBMP = e.file.type === 'image/bmp';
const isGIF = e.file.type === 'image/gif';
const isWEBP = e.file.type === 'image/webp';
const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;
if (!isPic) {
message.error('只能上传图片');
console.log(e.fileList);
return e.fileList.filter((fileItem)=> e.file.uid !== fileItem.uid);
} else {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
}
};
picCancel = () => this.setState({ previewVisible: false })
handlePreview = (file) => {
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
}
handleChange = ({fileList}) => {
this.setState({
fileList,
} )
};
方法2 用 fileList: […fileListD],控制
<FormItem
label=" "
{...formItemLayout}
wrapperCol={{ span: 18 }}
colon={false}
>
<div style={{ height: "100%" }}>
<Upload
accept="image/*"
name="pic"
listType="picture-card"
{...uploadProp}
onPreview={this.handlePreview}
onChange={this.handleChange}
beforeUpload={this.beforeUpload}
>
{fileList.length >= 5 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
</FormItem>
const uploadProp = {
fileList: [...fileListD],
action: '/hq/home/Media/upLoad.hq',
// headers: {
// authorization: window.localStorage.getItem(STORAGETOKENKEY),
// },
};
// 图片上传
handleCancel = () => this.setState({ previewVisible: false });
handlePreview = (file) => {
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
};
handleChange = ({ fileList }) => {
const img_id = [];
if (fileList[fileList.length - 1]) {
if (fileList[fileList.length - 1].status === 'done') {
for (let i = 0; i < fileList.length; i++) {
img_id.push(fileList[i].response.info.id);
}
}
}
for (let i = 0; i < fileList.length; i++) {
const file = fileList[i];
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isBMP = file.type === 'image/bmp';
const isGIF = file.type === 'image/gif';
const isWEBP = file.type === 'image/webp';
const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;
if (!isPic) {
fileList = fileList.filter((fileItem)=> file.uid !== fileItem.uid);
}
}
pic = img_id.toString();
fileListD = fileList;
this.setState({
fileList,
});
};
beforeUpload=(file, fileList) => {
// 检查图片类型
// 只能上传三种图片格式
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isBMP = file.type === 'image/bmp';
const isGIF = file.type === 'image/gif';
const isWEBP = file.type === 'image/webp';
const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;
if (!isPic) {
message.error('只能上传图片');
this.setState({
fileListD: fileList.filter((fileItem)=> file.uid !== fileItem.uid),
});
return false;
}
return isPic;
};