antd Upload 上传多张图片 react hooks
父组件模板:import UploadComponent from "./component";<Col span={24}><Form.ItemclassName={styles.uploadImgItem}label="Image"name="uploadPhoto"//用了预览的组件,手动绑定图片路径,NONO!
·
父组件模板:
import UploadComponent from "./component";
<Col span={24}>
<Form.Item
className={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 } = file
file.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') {
//请求接口,删除已经保存过的图片,并且成功之后triggerChange
triggerChange(fileList);
} else {
//只是上传到了服务器,并没有保存,直接riggerChange
triggerChange(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,//后端定义的type
Id: uuidv4(),
FileType: getUploadFileType(file),
};
},
beforeUpload: (file) => {// 礼品image
const 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 (
<div
className={styles.box}
>
<Upload
{...uploadImages}
fileList={fileList}
onChange={handleChange}
>
{fileList.length >= 4 ? null : uploadButton}
</Upload>
<Modal
visible={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>
);
};
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献4条内容
所有评论(0)