父组件模板：
import UploadComponent from "./component";<Col span={24}><Form.ItemclassName={styles.uploadImgItem}label="Image"name="uploadPhoto"//用了预览的组件,手动绑定图片路径,NONO！rules={rulesObj.Image}><UploadComponent />//这个是上传图片的组件！</Form.Item></Col>
上传图片的重要组件：
import React, { useState, useEffect } from "react";import { Upload, Modal, message } from 'antd';import { requestUrl, getUploadFileType, MessageError, MessageSuccess } from '../../../../utils/utils';import { v4 as uuidv4 } from 'uuid';import { PlusOutlined } from "@ant-design/icons";import styles from "./index.less";export default (props) => {const [fileList, setFileList] = useState([])const [previewVisible, setPreviewVisible] = useState(false);const [previewImage, setPreviewImage] = useState('');useEffect(() => {if (props.value) {let newFileList = props.value.map((item, index) => {return {uid: item.id,id: item.id,url: item.url,}})setFileList(newFileList)//把每一个返回回来的 图片item 处理好后 放入DileList}}, [props])const handleChange = ({ file, fileList }) => {fileList = fileList.map((file) => {if (file.response) {const { response } = filefile.uid = response.DocumentId;file.id = response.DocumentId;file.url = `${ATTACHMENT_URL}${response.UploadPath}`//预览}return file;});if (file.status !== undefined) {if (file.status === 'done') {console.log('上传成功')// console.log(fileList);triggerChange(fileList);} else if (file.status === 'error') {console.log('上传失败')} else if (file.status === 'removed') {if (typeof file.uid === 'number') {//请求接口，删除已经保存过的图片，并且成功之后triggerChangetriggerChange(fileList);} else {//只是上传到了服务器，并没有保存，直接riggerChangetriggerChange(fileList);}}}setFileList([...fileList]);}const triggerChange = (value) => {const onChange = props.onChange;if (onChange) {onChange(value);//将改变的值 传给父组件}};const uploadButton = (<div><PlusOutlined /><div className="ant-upload-text">Upload</div></div>);const uploadImages = {action: requestUrl + '/api/common/CommonUpload',headers: {SessionKey: `${localStorage.getItem('sk')}`,},accept:".jpeg,.png,.jpg",listType:"picture-card",data: (file) => {return {UploadType: 1027,//后端定义的typeId: uuidv4(),FileType: getUploadFileType(file),};},beforeUpload: (file) => {// 礼品imageconst limitFileNameLen = 100;return new Promise((resolve, reject) => {if (file.name && file.name.length > limitFileNameLen) {message.error('Please upload a file with a file name less than 100 characters');//请上传文件名不超过100个字符的文件return Promise.reject();}const limitM = 2;const isLimit = file.size / 1024 / 1024 <= limitM;console.log(isLimit);if (!isLimit) {message.error('The size exceeds the limit');return Promise.reject();}return resolve();});},onPreview :(file) => {setPreviewImage(file.url);setPreviewVisible(true);}}return (<divclassName={styles.box}><Upload{...uploadImages}fileList={fileList}onChange={handleChange}>{fileList.length >= 4 ? null : uploadButton}</Upload><Modalvisible={previewVisible}title='preview'footer={null}onCancel={() => setPreviewVisible(false)}><img alt="Network fault" style={{ width: '100%' }} src={previewImage} /></Modal><span >建议尺寸750*350，支持jpg/jpeg、png格式图片,小于2M</span></div>);};
