<Form.Item label="封面"><Form.Item name="type"><Radio.Group onChange={onTypeChange}><Radio value={1}>單圖</Radio><Radio value={3}>三圖</Radio><Radio value={0}>無圖</Radio></Radio.Group></Form.Item>{/* listType: 決定選擇文件框的外觀樣式showUploadList: 控制顯示上傳列表*/}{imageType > 0 && <UploadlistType="picture-card"showUploadListaction={'http://geek.itheima.net/v1_0/upload'}name='image'onChange={onChange}maxCount={imageType}fileList={imageList}><div style={{ marginTop: 8 }}><PlusOutlined /></div></Upload>}</Form.Item>

相關屬性

listType: 決定選擇文件框的外觀樣式

showUploadList: 控制顯示上傳列表

onChange 上傳回調，有默認形參

  //上傳回調const onChange = (val)=>{console.log(val);}

默認形參，打印結果如下：

備注：將fileList中的數據存下來，提交給后端
name上傳的接口字段，由接口字段提供，接口文檔中叫啥名，這里就叫啥名

action 配置上傳地址


對封面類型與圖片數量的校驗

目的:如果封面類型選的是三圖，而只上傳了一張圖片，則不能發布文章，上傳圖片數量必須與選擇的封面類型要求的圖片數量一致

// 提交表單const onFinish = (formValue) => {console.log(formValue)// 校驗封面類型imageType是否和實際的圖片列表imageList數量是相等的if (imageList.length !== imageType) return message.warning('封面類型和圖片數量不匹配')const { title, content, channel_id } = formValue// 1. 按照接口文檔的格式處理收集到的表單數據const reqData = {title,content,cover: {type: imageType, // 封面模式// 這里的url處理邏輯只是在新增時候的邏輯// 編輯的時候需要做處理images: imageList.map(item => {if (item.response) {return item.response.data.url} else {return item.url}}) // 圖片列表},channel_id}