|
@@ -0,0 +1,192 @@
|
|
|
|
+import React, { useCallback, useRef } from "react";
|
|
|
|
+import styles from "./index.module.scss";
|
|
|
|
+import {
|
|
|
|
+ PlusOutlined,
|
|
|
|
+ EyeOutlined,
|
|
|
|
+ CloseOutlined,
|
|
|
|
+ DownloadOutlined,
|
|
|
|
+} from "@ant-design/icons";
|
|
|
|
+import { ReactSortable } from "react-sortablejs";
|
|
|
|
+import ImageLazy from "@/components/ImageLazy";
|
|
|
|
+
|
|
|
|
+import { FileImgListType } from "@/types";
|
|
|
|
+import { Popconfirm } from "antd";
|
|
|
|
+import store from "@/store";
|
|
|
|
+import { baseURL } from "@/utils/http";
|
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
|
+import { A1_APIupFile } from "@/store/action/A1Plate";
|
|
|
|
+import { fileDomInitialFu } from "@/utils/domShow";
|
|
|
|
+import classNames from "classnames";
|
|
|
|
+
|
|
|
|
+type Props = {
|
|
|
|
+ max: number; //最多传多少张图片
|
|
|
|
+ fileList: FileImgListType[]; //图片数组
|
|
|
|
+ setFileList: (data: FileImgListType[]) => void; //设置图片数组
|
|
|
|
+ isLook: boolean; //是否是查看
|
|
|
|
+ fileCheck: boolean;
|
|
|
|
+ size: number; //上传图片大小(M)
|
|
|
|
+ dirCode: string; //文件的code码
|
|
|
|
+ format?: string[]; //上传图片格式
|
|
|
|
+ formatTxt?: string; //上传图片提示
|
|
|
|
+ sizeTxt?: string; //后面的建议尺寸信息
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+function Z_upFileMore({
|
|
|
|
+ max,
|
|
|
|
+ fileList,
|
|
|
|
+ setFileList,
|
|
|
|
+ isLook,
|
|
|
|
+ fileCheck,
|
|
|
|
+ size,
|
|
|
|
+ dirCode,
|
|
|
|
+ format = ["image/jpeg", "image/png"],
|
|
|
|
+ formatTxt = "png、jpg和jpeg",
|
|
|
|
+ sizeTxt,
|
|
|
|
+}: Props) {
|
|
|
|
+ const myInput = useRef<HTMLInputElement>(null);
|
|
|
|
+
|
|
|
|
+ // 上传图片
|
|
|
|
+ const handeUpPhoto = useCallback(
|
|
|
|
+ async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
|
+ if (e.target.files) {
|
|
|
|
+ // 拿到files信息
|
|
|
|
+ const filesInfo = e.target.files[0];
|
|
|
|
+ // 校验格式
|
|
|
|
+ const type = format;
|
|
|
|
+ if (!type.includes(filesInfo.type)) {
|
|
|
|
+ e.target.value = "";
|
|
|
|
+ return MessageFu.warning(`只支持${formatTxt}格式!`);
|
|
|
|
+ }
|
|
|
|
+ // 校验大小
|
|
|
|
+ if (filesInfo.size > size * 1024 * 1024) {
|
|
|
|
+ e.target.value = "";
|
|
|
|
+ return MessageFu.warning(`最大支持${size}M!`);
|
|
|
|
+ }
|
|
|
|
+ // 创建FormData对象
|
|
|
|
+ const fd = new FormData();
|
|
|
|
+ // 把files添加进FormData对象(‘photo’为后端需要的字段)
|
|
|
|
+ fd.append("type", "img");
|
|
|
|
+ fd.append("dirCode", dirCode);
|
|
|
|
+ fd.append("typePath", "1");
|
|
|
|
+ fd.append("file", filesInfo);
|
|
|
|
+
|
|
|
|
+ e.target.value = "";
|
|
|
|
+
|
|
|
|
+ try {
|
|
|
|
+ const res = await A1_APIupFile(fd);
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ MessageFu.success("上传成功!");
|
|
|
|
+ setFileList([...fileList, res.data]);
|
|
|
|
+ }
|
|
|
|
+ fileDomInitialFu();
|
|
|
|
+ } catch (error) {
|
|
|
|
+ fileDomInitialFu();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ [dirCode, fileList, format, formatTxt, setFileList, size]
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ // 列表删除某一张图片
|
|
|
|
+ const delImgListFu = useCallback(
|
|
|
|
+ (id: number) => {
|
|
|
|
+ const newItems = fileList.filter((v) => v.id !== id);
|
|
|
|
+ setFileList(newItems);
|
|
|
|
+ },
|
|
|
|
+ [fileList, setFileList]
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <div className={styles.Z_upFileMore}>
|
|
|
|
+ <input
|
|
|
|
+ id="upInput"
|
|
|
|
+ type="file"
|
|
|
|
+ accept=".png,.jpg,.jpeg"
|
|
|
|
+ ref={myInput}
|
|
|
|
+ onChange={(e) => handeUpPhoto(e)}
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <div
|
|
|
|
+ hidden={(fileList.length && fileList.length >= max) || isLook}
|
|
|
|
+ className="fileBoxRow_up"
|
|
|
|
+ onClick={() => myInput.current?.click()}
|
|
|
|
+ >
|
|
|
|
+ <PlusOutlined />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <ReactSortable
|
|
|
|
+ disabled={isLook}
|
|
|
|
+ className={classNames(
|
|
|
|
+ "fileImgListBox",
|
|
|
|
+ isLook ? "fileImgListBoxNo" : ""
|
|
|
|
+ )}
|
|
|
|
+ list={fileList}
|
|
|
|
+ setList={setFileList}
|
|
|
|
+ >
|
|
|
|
+ {fileList.map((v, i) => (
|
|
|
|
+ <div className="fileBoxRow_r_img" key={v.id}>
|
|
|
|
+ {v.filePath ? (
|
|
|
|
+ <ImageLazy noLook width={100} height={100} src={v.filePath} />
|
|
|
|
+ ) : null}
|
|
|
|
+
|
|
|
|
+ <Popconfirm
|
|
|
|
+ title="删除后无法恢复,是否删除?"
|
|
|
|
+ okText="删除"
|
|
|
|
+ cancelText="取消"
|
|
|
|
+ onConfirm={() => delImgListFu(v.id!)}
|
|
|
|
+ >
|
|
|
|
+ <div className="clearCover" hidden={isLook}>
|
|
|
|
+ <CloseOutlined />
|
|
|
|
+ </div>
|
|
|
|
+ </Popconfirm>
|
|
|
|
+ {/* 下面的预览和下载 */}
|
|
|
|
+ <div className="fileImgListLDBox">
|
|
|
|
+ <EyeOutlined
|
|
|
|
+ onClick={() =>
|
|
|
|
+ store.dispatch({
|
|
|
|
+ type: "layout/lookBigImg",
|
|
|
|
+ payload: {
|
|
|
|
+ url: baseURL + v.filePath,
|
|
|
|
+ show: true,
|
|
|
|
+ },
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ />
|
|
|
|
+ <a
|
|
|
|
+ href={baseURL + v.filePath}
|
|
|
|
+ download
|
|
|
|
+ target="_blank"
|
|
|
|
+ rel="noreferrer"
|
|
|
|
+ >
|
|
|
|
+ <DownloadOutlined />
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ ))}
|
|
|
|
+ </ReactSortable>
|
|
|
|
+ <div className="fileTit" hidden={isLook}>
|
|
|
|
+ {fileList.length && fileList.length >= 2 ? (
|
|
|
|
+ <>
|
|
|
|
+ 按住鼠标可拖动图片调整顺序。
|
|
|
|
+ <br />
|
|
|
|
+ </>
|
|
|
|
+ ) : null}
|
|
|
|
+ 支持{formatTxt}的图片格式;最大支持{size}M;最多支持{max}张。
|
|
|
|
+ {sizeTxt ? `建议尺寸${sizeTxt}` : null}
|
|
|
|
+ <br />
|
|
|
|
+ <div
|
|
|
|
+ className={classNames(
|
|
|
|
+ "noUpThumb",
|
|
|
|
+ fileList.length <= 0 && fileCheck ? "noUpThumbAc" : ""
|
|
|
|
+ )}
|
|
|
|
+ >
|
|
|
|
+ 请上传图片!
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const MemoZ_upFileMore = React.memo(Z_upFileMore);
|
|
|
|
+
|
|
|
|
+export default MemoZ_upFileMore;
|