|
@@ -1,120 +1,135 @@
|
|
|
-import { message, Space, Upload, Image, Button } from "antd"
|
|
|
-import { PlusOutlined, LoadingOutlined, DeleteOutlined } from "@ant-design/icons";
|
|
|
-import { RcFile } from "antd/lib/upload";
|
|
|
-import React, { useState } from "react";
|
|
|
-import './index.less'
|
|
|
-import { getBase64, getImgSizeProper } from "@/utils";
|
|
|
-import { getOssInfo } from "@/services/ant-design-pro/api";
|
|
|
-import { request } from "@umijs/max";
|
|
|
+import { getOssInfo } from '@/services/ant-design-pro/api';
|
|
|
+import { getBase64, getImgSizeProper } from '@/utils';
|
|
|
+import { DeleteOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
+import { request } from '@umijs/max';
|
|
|
+import { Button, Image, message, Space, Upload } from 'antd';
|
|
|
+import { RcFile } from 'antd/lib/upload';
|
|
|
+import React, { useState } from 'react';
|
|
|
+import './index.less';
|
|
|
|
|
|
interface Props {
|
|
|
- value?: string[], // 图片地址
|
|
|
- maxCount?: number
|
|
|
- onChange?: (data: RcFile[] | string[]) => void,
|
|
|
- tooltip?: JSX.Element
|
|
|
- isUpload?: boolean, // 是否上传
|
|
|
- sizeData?: {
|
|
|
- width: number,
|
|
|
- height: number
|
|
|
- }
|
|
|
+ value?: string[]; // 图片地址
|
|
|
+ maxCount?: number;
|
|
|
+ onChange?: (data: RcFile[] | string[]) => void;
|
|
|
+ tooltip?: JSX.Element;
|
|
|
+ isUpload?: boolean; // 是否上传
|
|
|
+ sizeData?: {
|
|
|
+ width: number;
|
|
|
+ height: number;
|
|
|
+ };
|
|
|
}
|
|
|
const UploadImgs: React.FC<Props> = (props) => {
|
|
|
+ /** 变量START */
|
|
|
+ const { value, maxCount = 1, tooltip, sizeData, isUpload = false, onChange } = props;
|
|
|
+ const [imageFile, setImageFile] = useState<string[]>(value || []);
|
|
|
+ const [loading, setLoading] = useState<boolean>(false);
|
|
|
+ /** 变量END */
|
|
|
|
|
|
- /** 变量START */
|
|
|
- const { value, maxCount = 1, tooltip, sizeData, isUpload = false, onChange } = props
|
|
|
- const [imageFile, setImageFile] = useState<string[]>(value || []);
|
|
|
- const [loading, setLoading] = useState<boolean>(false)
|
|
|
- /** 变量END */
|
|
|
-
|
|
|
- const beforeUpload = async (file: RcFile) => {
|
|
|
- const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
|
- if (!isJpgOrPng) {
|
|
|
- message.error('您只能上传JPG/PNG文件!');
|
|
|
- }
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
- if (!isLt2M) {
|
|
|
- message.error('图像必须小于2MB!');
|
|
|
- }
|
|
|
+ const beforeUpload = async (file: RcFile) => {
|
|
|
+ const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
|
+ if (!isJpgOrPng) {
|
|
|
+ message.error('您只能上传JPG/PNG文件!');
|
|
|
+ }
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ if (!isLt2M) {
|
|
|
+ message.error('图像必须小于2MB!');
|
|
|
+ }
|
|
|
|
|
|
- if (sizeData) {
|
|
|
- let imgData: any = await getImgSizeProper(file)
|
|
|
- if (sizeData?.width !== imgData.width || sizeData?.height !== imgData.height) {
|
|
|
- message.error(`传入的图片大小不符, 图片大小${imgData.width}*${imgData.height}, 需要图片大小${sizeData.width}*${sizeData.height}`)
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return isJpgOrPng && isLt2M;
|
|
|
- };
|
|
|
+ if (sizeData) {
|
|
|
+ let imgData: any = await getImgSizeProper(file);
|
|
|
+ if (sizeData?.width !== imgData.width || sizeData?.height !== imgData.height) {
|
|
|
+ message.error(
|
|
|
+ `传入的图片大小不符, 图片大小${imgData.width}*${imgData.height}, 需要图片大小${sizeData.width}*${sizeData.height}`,
|
|
|
+ );
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return isJpgOrPng && isLt2M;
|
|
|
+ };
|
|
|
|
|
|
- const uploadButton = (
|
|
|
- <div>
|
|
|
- {loading ? <LoadingOutlined /> : <PlusOutlined />}
|
|
|
- </div>
|
|
|
- );
|
|
|
+ const uploadButton = <div>{loading ? <LoadingOutlined /> : <PlusOutlined />}</div>;
|
|
|
|
|
|
- const clearHandle = (index: number) => {
|
|
|
- if (index > -1) {
|
|
|
- let newImageFile = JSON.parse(JSON.stringify(imageFile))
|
|
|
- newImageFile.splice(index, 1)
|
|
|
- console.log(newImageFile)
|
|
|
- setImageFile(newImageFile);
|
|
|
- onChange?.(newImageFile)
|
|
|
- }
|
|
|
+ const clearHandle = (index: number) => {
|
|
|
+ if (index > -1) {
|
|
|
+ let newImageFile = JSON.parse(JSON.stringify(imageFile));
|
|
|
+ newImageFile.splice(index, 1);
|
|
|
+ console.log(newImageFile);
|
|
|
+ setImageFile(newImageFile);
|
|
|
+ onChange?.(newImageFile);
|
|
|
}
|
|
|
+ };
|
|
|
|
|
|
- return <div className="myUpload">
|
|
|
- <Image.PreviewGroup preview={{ onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`), }}>
|
|
|
- <Space wrap>
|
|
|
- {imageFile.map((item, index) => <div key={index} className="preViewContent" style={{ width: 100, height: 100 }}>
|
|
|
- <Image src={item} style={{ width: '100%', height: '100%' }} />
|
|
|
- <div className="clear">
|
|
|
- <Button icon={<DeleteOutlined />} onClick={() => clearHandle(index)} type="link" danger style={{ padding: 0, width: 'auto', height: 'auto' }} />
|
|
|
- </div>
|
|
|
- </div>)}
|
|
|
- <Upload
|
|
|
- name="avatar"
|
|
|
- listType="picture-card"
|
|
|
- accept='image/gif,image/jpeg,image/png,image/jpg'
|
|
|
- className="avatar-uploader"
|
|
|
- beforeUpload={beforeUpload}
|
|
|
- showUploadList={false}
|
|
|
- customRequest={async (options: any) => {
|
|
|
- if (isUpload) { // 上传oss
|
|
|
- try {
|
|
|
- setLoading(true)
|
|
|
- let res = await getOssInfo({ type: 'image/jpeg', fileType: 'image' })
|
|
|
- let formData = new FormData();
|
|
|
- Object.keys(res.data).forEach((key: string) => {
|
|
|
- if (key !== 'url') {
|
|
|
- formData.append(key, res.data[key])
|
|
|
- }
|
|
|
- })
|
|
|
- formData.append('file', options.file)
|
|
|
- let urlData = await request(res?.data?.ossUrl, { method: 'POST', data: formData })
|
|
|
- setLoading(false)
|
|
|
- imageFile.push(urlData?.data?.url)
|
|
|
- setImageFile(imageFile);
|
|
|
- onChange?.(imageFile)
|
|
|
- } catch (error) {
|
|
|
- setLoading(false)
|
|
|
- }
|
|
|
- } else {
|
|
|
- getBase64(options.file as RcFile, url => {
|
|
|
- imageFile.push(url)
|
|
|
- setImageFile(imageFile);
|
|
|
- })
|
|
|
- onChange && onChange(options.file)
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- {imageFile.length < maxCount && uploadButton}
|
|
|
- </Upload>
|
|
|
- </Space>
|
|
|
- </Image.PreviewGroup>
|
|
|
+ return (
|
|
|
+ <div className="myUpload">
|
|
|
+ <Image.PreviewGroup
|
|
|
+ preview={{
|
|
|
+ onChange: (current, prev) =>
|
|
|
+ console.log(`current index: ${current}, prev index: ${prev}`),
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Space wrap>
|
|
|
+ {imageFile.map((item, index) => (
|
|
|
+ <div key={index} className="preViewContent" style={{ width: 100, height: 100 }}>
|
|
|
+ <Image src={item} style={{ width: '100%', height: '100%' }} />
|
|
|
+ <div className="clear">
|
|
|
+ <Button
|
|
|
+ icon={<DeleteOutlined />}
|
|
|
+ onClick={() => clearHandle(index)}
|
|
|
+ type="link"
|
|
|
+ danger
|
|
|
+ style={{ padding: 0, width: 'auto', height: 'auto' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ <Upload
|
|
|
+ name="avatar"
|
|
|
+ listType="picture-card"
|
|
|
+ accept="image/gif,image/jpeg,image/png,image/jpg"
|
|
|
+ className="avatar-uploader"
|
|
|
+ beforeUpload={beforeUpload}
|
|
|
+ showUploadList={false}
|
|
|
+ customRequest={async (options: any) => {
|
|
|
+ if (isUpload) {
|
|
|
+ // 上传oss
|
|
|
+ try {
|
|
|
+ setLoading(true);
|
|
|
+ let res = await getOssInfo({ type: 'image/jpeg', fileType: 'image' });
|
|
|
+ let formData = new FormData();
|
|
|
+ Object.keys(res.data).forEach((key: string) => {
|
|
|
+ if (key !== 'url') {
|
|
|
+ formData.append(key, res.data[key]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ formData.append('file', options.file);
|
|
|
+ let urlData = await request(res?.data?.ossUrl, {
|
|
|
+ method: 'POST',
|
|
|
+ data: formData,
|
|
|
+ });
|
|
|
+ setLoading(false);
|
|
|
+ imageFile.push(urlData?.data?.url);
|
|
|
+ setImageFile(imageFile);
|
|
|
+ onChange?.(imageFile);
|
|
|
+ } catch (error) {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ getBase64(options.file as RcFile, (url) => {
|
|
|
+ imageFile.push(url);
|
|
|
+ setImageFile(imageFile);
|
|
|
+ });
|
|
|
+ onChange && onChange(options.file);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {imageFile.length < maxCount && uploadButton}
|
|
|
+ </Upload>
|
|
|
+ </Space>
|
|
|
+ </Image.PreviewGroup>
|
|
|
|
|
|
- <div>{tooltip && tooltip}</div>
|
|
|
+ <div>{tooltip && tooltip}</div>
|
|
|
</div>
|
|
|
-}
|
|
|
-
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
-export default React.memo(UploadImgs)
|
|
|
+export default React.memo(UploadImgs);
|