antd upload和form结合使用

做了个antd的上传简单封装，很烦。主要用的方法就是使用customRequest 这个覆盖上传组件的默认上传，实现自定义上传。有的地方可能比较low 因为我不知道其他方法。。

import React from 'react'
import {Icon,Upload,Modal} from 'antd'
import { uploadimg } from '../../api/login'
export default class UploadIcon extends React.Component{constructor(props) {super(props)const value = props.value || {};this.state = {previewImage: '',fileList: value|[],max:value.max|1}}customRequest = (option) => {const that = thisconst formData = new FormData();formData.append('photo', option.file);uploadimg(formData).then(res => {that.state.fileList.push({name: 'yyy.png',status: 'done',url: res.data[0].file_url,})that.state.fileList.map((v, i) => {v.uid = i})that.setState({fileList: that.state.fileList})that.props.onChange(that.state.fileList)})}render(){const {fileList,previewVisible,previewImage,max} = this.stateconst uploadButton = (<div><Icon type="plus" /><div className="ant-upload-text">Upload</div></div>);return (<div><Uploadaction=""listType="picture-card"customRequest={this.customRequest}fileList={fileList}onPreview={this.handlePreview}onChange={this.handleChange}>{fileList.length >= max ? null : uploadButton}</Upload><Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}><img alt="example" style={{ width: '100%' }} src={previewImage} /></Modal></div>)}
}

下面的是antd 上传与form结合使用的方法，这个我在网上找了好久都没找到。。。。。

在form里写这个。然后因为他这个检测是用的方法来检测

<Form.Itemlabel="应用图标">{getFieldDecorator('icon', {initialValue: { iconList:[] },rules: [{ required: true,validator: this.checkImg }],})(<UploadIcon/> // 组件引入)}</Form.Item>

添加方法： callback就是返回的错误值。

checkImg = (rule, value, callback) => {console.log(value)if (value.length) {callback();return;}callback('请添加游戏图片');}

antd upload和form结合使用相关推荐

antd Upload手动上传(react)
情况介绍在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的 ...
antd Upload组件上传状态一直处于uploading
antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...
antd upload手动上传_Flask上传文件
Flask上传文件上传文件包括很多,比如用户头像,文章图片,文件分享等等,它也涉及到很多内容:上传文件,过滤文件类型,限制大小,文件名的编辑,拖拽上传,进度条,文件命名,文件目录的管理等等. 文件上 ...
antd upload取消图片删除按钮
** <UploadshowUploadList={{showRemoveIcon:false}}//加上这句代码onChange={this.uploadStateChange}beforeU ...
antd Upload 自定义上传
需求由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上 ...
【Antd Design Upload】 antd Upload 上传时只有Uploading状态，无法获取返回的数据
问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...
AntD Upload在React useState中使用问题
主要代码 <Uploadaction="https://www.mocky.io/v2/5cc8019d300000980a055e76"listType="pic ...
Antd Upload 文件上传，自定义上传错误信息
项目需求使用antd Upload 组件项目上要求前端对上传不符合标准的图片展示具体的错误信息不设置action,即返回信息无response ,先在前端上传后调用接口保存效果截图主要是根据 ...
Antd Upload 和 Antd Form 结合的踩坑记录
今天弄了半天这个上传组件结合表单组件的问题. 这个上传文件列表,如果是当前正在修改或者上传成功,当然是可以正常工作的,但是想要增加一个功能: 下次打开 Modal 时,表单字段中的上传文件字段,可以默 ...

antd upload和form结合使用

antd upload和form结合使用相关推荐

最新文章

热门文章