Ant Design Upload组件在From中使用

版权声明： https://blog.csdn.net/caoyan0829/article/details/87981752

componentDidMount() {
		const { alldata } = this.props;
		const arr = [{
			uid: '-1',
			name: 'xxx.png',
			status: 'done',
			url: alldata.logo,
		}];
		
		this.setState({
			defaultFileListOne: arr,  //拿到图片的url，为默认图
		});
  }

render() {
    const props = {
			accept: 'image/*',
			name: 'file',
			action: '/upload/placeweb/file/upload',
			listType: 'picture-card',
			onChange(info) {
				if (info.file.status !== 'uploading') {
					_this.setState({ 
						fileList:info.fileList,
						defaultFileListOne:info.fileList,
					})
				}
				if (info.file.status === undefined) {
					while (info.fileList[0].status === undefined) {
						info.fileList.shift();
					}
				}
				if (info.file.status === 'done') {
					message.success(`${info.file.name} 上传成功`);
					
				} else if (info.file.status === 'error') {
					message.error(`${info.file.name} 上传失败`);
				}
			},
			defaultFileList:_this.state.defaultFileListOne   //默认图
		}
}
return (
    <FormItem label="图片" {...formItemLayout}  extra="支持扩展名：.png .jpg, 最大10M" >
		{
			getFieldDecorator('logo', {
				validateFirst: true,
				rules: [
					{ required: true, message: '请上传图片' },
				],
				initialValue: alldata.logo || { file: {}, fileList: [] },
			})(
				<Upload {...props}
				onPreview={this.handlePreview} //查看图片
				>
				{fileList.length >= 1 || props.defaultFileList.length >= 1 ? null : uploadButton} //此处是为了只有一个图片
				</Upload>
			)}
	</FormItem>
)