父组件：
// handleImg是回调函数，imgPath是子组件给父组件传递的数据
const handleImg = (imgPath:any) => {
setCardImg(imgPath)
console.log(imgPath,'imgPath');
}
<ImgUpload onChange={handleImg}/>
子组件:
const handleChange = (e:any) => {
const fileList = e.fileList
setImgList(fileList)
if(e.file.response?.data.img){
// 子组件调用从父组件中解构出来的onChange回调函数，并将参数传递给父组件
onChange(e.file.response.data.img)
}
}
<Upload
action="http://localhost:9000/api/v1/element/img/upload"
listType="picture-card"
fileList={imgList}
onChange={handleChange}
name='img'
>
{imgList.length >= 1 ? null : uploadButton}
</Upload>
完整案例(ant-design组件库中的图片上传)：
父组件：
import React, { useRef, useState, useEffect } from 'react'
import { Form, Input, Button, Radio, Menu, Dropdown, message, Modal } from 'antd'
import { CaretDownOutlined, PlusOutlined } from '@ant-design/icons'
import ImgUpload from '@/components/ImgUpload'
import './style.scss'
export default () => {
const inputEl: any = useRef(null)
const [colorClass, setColorClass ] = useState('color1')
const [cardImg, setCardImg ] = useState('')
const [visible, setVisible] = useState(false);
const [visibleModal, setVisibleModal] = useState(false);
const onFinish = (values: any) => {
values.color = colorClass
console.log('Success:', values)
}
const nameHandle = (e: any) => {
inputEl.current.innerText = e.target.value==='' ? '卡片名称' : e.target.value
}
const colorChange = ({ key }: any) => {
setColorClass(key)
}
const modalChange = () => {
setVisible(false)
setVisibleModal(true)
}
const backImg = () => {
setVisible(true)
setVisibleModal(false)
}
const modalTitle = () => {
return (
<>
<a onClick={backImg}>< 我的图片</a> <span>/ 本地上传</span>
</>
)
}
const handleImg = (imgPath:any) => {
setCardImg(imgPath)
console.log(imgPath,'imgPath');
}
const menu = (
<Menu onClick={colorChange}>
<Menu.Item key="color1" className='color1 box'></Menu.Item>
<Menu.Item key="color2" className='color2 box'></Menu.Item>
<Menu.Item key="color3" className='color3 box'></Menu.Item>
<Menu.Item key="color4" className='color4 box'></Menu.Item>
<Menu.Item key="color5" className='color5 box'></Menu.Item>
<Menu.Item key="color6" className='color6 box'></Menu.Item>
</Menu>
)
return (
<div className='create-card'>
<span className='create-title'>基本信息</span>
<div className='create-form'>
<div className={`card-box ${colorClass}`}>
<span className='cardName' ref={inputEl} >卡片名称</span>
<span className='validPeriod'>永久有效</span>
</div>
<Form
name="basic"
labelCol={{ span: 3 }}
wrapperCol={{ span: 11 }}
onFinish={onFinish}
style={{marginTop: '25px'}}
>
<Form.Item
label="名称："
name="cardname"
rules={[{ required: true, message: '请输入名称' }]}
>
<Input
placeholder="最多输入9个字符"
style={{width:'177px'}}
onChange={nameHandle}
/>
</Form.Item>
<Form.Item
name="radio-group"
label="背景设置"
rules={[{ required: true, message: '请选择背景' }]}
>
<Radio.Group>
<Radio value="color">
<span>背景色</span>
<div className='select-color'>
<Dropdown
trigger={['click']}
overlay={menu}
overlayClassName='select-box'
>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
<span className={`color-box ${colorClass}`}></span><CaretDownOutlined />
</a>
</Dropdown>
</div>
</Radio>
<br />
<Radio value="img" className='Imgradio'>
<span>背景图</span><br />
<div onClick={() => setVisible(true)} className='toImgModal' >
<PlusOutlined />
</div>
<Modal
title="我的图片"
centered
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
width={900}
bodyStyle={{height: '350px', overflowY: 'auto'}}
style={{borderRadius: '5px', padding: '0 0 16px'}}
transitionName=""
maskTransitionName=""
>
<Button type="primary" onClick={modalChange}>上传图片</Button>
<p>aaaaaaa</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
<Modal
title={modalTitle()}
centered
visible={visibleModal}
onOk={() => setVisibleModal(false)}
onCancel={() => setVisibleModal(false)}
width={900}
bodyStyle={{height: '350px', overflowY: 'auto'}}
style={{borderRadius: '5px', padding: '0 0 16px'}}
transitionName=""
maskTransitionName=""
>
<span>本地图片</span>
<ImgUpload onChange={handleImg}/>
</Modal>
</Radio>
</Radio.Group>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
</div>
</div>
)
}
子组件：
import React, { useState } from 'react';
import { Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons'
export default ({onChange}:any) => {
const [imgList, setImgList] = useState([])
const handleChange = (e:any) => {
const fileList = e.fileList
setImgList(fileList)
if(e.file.response?.data.img) onChange(e.file.response.data.img)
}
const uploadButton = (
<div>
<PlusOutlined />
<div style={{ marginTop: 10 }}>上传</div>
</div>
)
return (
<>
<Upload
action="http://localhost:9000/api/v1/element/img/upload"
listType="picture-card"
fileList={imgList}
onChange={handleChange}
name='img'
>
{imgList.length >= 1 ? null : uploadButton}
</Upload>
</>
)
}
// http://localhost:9999//api/v1/element/upload/img
网友评论