ant design Upload上传图片

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

我使用的是照片墙这个模块

 

componentDidMount() {
		const { alldata } = this.props;
		const arr = [{
			uid: '-1',
			name: 'xxx.png',
			status: 'done',
			url: alldata.logo,
		}];
		this.setState({
			defaultFileListOne: arr,   //这里从table列表中获得图片的url，默认命名
		});
  }



//render
const props = {
			accept: 'image/*',
			name: 'file',
			action: '你的后台接口',
			listType: 'picture-card',
			onChange(info) {
				console.log(info) 
				if (info.file.status !== 'uploading') {
					_this.setState({ 
						fileList:info.fileList,  //这是你上传图片的数组
						defaultFileListOne:info.fileList,  //这是根据业务最多只要一个图片
					})
				}
				if (info.file.status === undefined) {
					while (info.fileList.length > 0 && 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} 上传失败`);
				}
			},
			beforeUpload(file, fileList) {    //提前判断图片类型和大小限制
				for(let i = 0; i < fileList.length; i++){
					let imgType = fileList[i].type;
					if (imgType !== 'image/jpeg' && imgType !== 'image/png' && _this.state.radioTypeValue == 0){
							message.error('所选文件存在非.png .jpg文件');
							return false;
					}else if(imgType !== 'image/jpeg' && imgType !== 'image/png' && imgType !== 'image/gif'){
						message.error('所选文件存在非.png .jpg .gif文件');
						return false;
					}
				}
				if (file.size / 1024 / 1024 > 10) {
					message.error(`${file.name} 文件大于10MB，无法上传`);
					return false;
				}
			},
			defaultFileList:_this.state.defaultFileListOne   //默认图片
		}

//return 
	<FormItem label="图片" {...formItemLayout}  extra={radioTypeValue ===0 ? "支持扩展名：.png .jpg, 最大10M" :"支持扩展名：.png .jpg .gif, 最大10M"}  >
		{
			getFieldDecorator('logo', {
				validateFirst: true,
				rules: [
					{ required: true, message: '请上传图片' },
				],
				initialValue: alldata.logo || '',
			})(
				<Upload {...props} onPreview={this.handlePreview}> //此方法是查看图片放大的 官网有
					{fileList.length >= 1 || props.defaultFileList.length >= 1 ? null : uploadButton}  //这里 只要照片有一个就不显示上传的框   fileList是用于框中没有图片状态。 defaultFileList是用于框中有默认的图片
				</Upload>
			)}
	</FormItem>