feat: 修改图片上传组件

package.json

@@ -129,6 +129,7 @@
 		"prettier": "^1.17.1",
 		"pro-download": "1.0.1",
 		"stylelint": "^10.1.0",
+		"stylelint-config-css-modules": "^4.4.0",
 		"webpack": "^4.46.0"
 	},
 	"engines": {

src/components/UploadImg/index.jsx

-import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  EyeOutlined,
+  PlusOutlined,
+  LoadingOutlined,
+  FileFilled,
+} from '@ant-design/icons';
 import { Modal, Upload, notification, Spin } from 'antd';
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import lodash from 'lodash';
+import { apiFileUpload } from './service.js';
 import { ReactSortable } from 'react-sortablejs';
-import { merchantUpload } from './service.js';
 import styles from './style.less';
+import { checkIsImagePath } from '@/utils/utils';
 
 const MAX_FILE_SIZE = 5;
 const UNIT = 1024 * 1024;
@@ -16,6 +23,27 @@ const UploadButton = (
   </div>
 );
 
+const renderFile = item => {
+  if (item.status === 'done') {
+    if (checkIsImagePath(item.url)) {
+      return <img width="100%" key={item.uid} src={item.url} alt="" />;
+    }
+    return (
+      <div className={styles.imgLoading}>
+        <a target="_blank" href={item.url} rel="noopener noreferrer">
+          <FileFilled />
+        </a>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.imgLoading}>
+      <LoadingOutlined />
+      <div className={styles.imgLoadingText}>文件上传中</div>
+    </div>
+  );
+};
+
 const UploadImage = forwardRef((props, ref) => {
   const {
     name = `${Date.now()}`,
@@ -26,6 +54,7 @@ const UploadImage = forwardRef((props, ref) => {
     value,
     width = 0,
     height = 0,
+    canUploadFile = false, // 是否可以上传图片之外的文件
     accept = ['jpg', 'jpeg', 'png'],
   } = props;
   const [uploadLoading, setUploadLoading] = useState(false);
@@ -41,6 +70,7 @@ const UploadImage = forwardRef((props, ref) => {
       url,
       name: url,
       uid: `${ind}`,
+      status: !url ? '' : 'done',
     }));
     fileListRef.current = [...newPictures];
     setFileList([...newPictures]);
@@ -49,9 +79,13 @@ const UploadImage = forwardRef((props, ref) => {
   const handleCancel = () => setPreviewVisible(false);
 
   const handlePreview = async file => {
-    setPreviewImage(file.url);
-    setPreviewVisible(true);
-    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
+    if (checkIsImagePath(file.url)) {
+      setPreviewImage(file.url);
+      setPreviewVisible(true);
+      setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
+    } else if (file.url) {
+      window.open(file.url);
+    }
   };
 
   const bundleChange = imgFile => {
@@ -66,37 +100,29 @@ const UploadImage = forwardRef((props, ref) => {
   const checkFile = file =>
     new Promise(resolve => {
       const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
-      if (!accept.includes(curType)) {
+      if (!canUploadFile && !accept.includes(curType)) {
         notification.open({
           message: file.name,
-          description: `图片格式须为${accept.join('、')}！`,
+          description: `文件格式须为${accept.join('、')}！`,
         });
         return resolve(null);
       }
       if (file.size > MAX_FILE_SIZE * UNIT) {
         notification.open({
           message: file.name,
-          description: `单个图片大小不能超过${MAX_FILE_SIZE}M！`,
+          description: `单个文件大小不能超过${MAX_FILE_SIZE}M！`,
         });
         return resolve(null);
       }
       return resolve(file);
     });
 
-  const imageLoading = (file, ret) =>
-    new Promise(resolve => {
-      const reader = new FileReader();
-      // 监听图片转换完成
-      reader.addEventListener(
-        'load',
-        () => {
-          const temFile = { uid: file.uid, status: 'done', name: file.name, url: ret };
-          resolve(temFile);
-        },
-        false,
-      );
-      reader.readAsDataURL(file);
-    });
+  const imageLoading = (file, ret) => ({
+    uid: file.uid,
+    status: 'done',
+    name: file.name,
+    url: ret,
+  });
 
   const getImageSize = async file =>
     new Promise((resolve, reject) => {
@@ -153,23 +179,25 @@ const UploadImage = forwardRef((props, ref) => {
         try {
           if (checkFiles.length) {
             setUploadLoading(true);
-            const res = await merchantUpload(checkFiles);
-            if (res?.data) {
-              const proFiles = (res.data || []).map((urlItem, urlIndex) =>
-                imageLoading(checkFiles[urlIndex], urlItem),
+            const res = await apiFileUpload(checkFiles);
+            console.log('res', res);
+            if (res) {
+              const proFiles = (res || []).map((urlItem, urlIndex) =>
+                imageLoading(checkFiles[urlIndex], urlItem.data),
               );
-              const imagList = await Promise.all(proFiles);
-              const newFiles = [...fileListRef.current, ...imagList];
+              // const imagList = await Promise.all(proFiles);
+              const newFiles = [...fileListRef.current, ...proFiles];
               bundleChange(newFiles);
             } else {
               notification.warning({
                 message: '警告',
-                description: res?.msg || '上传失败，请重新尝试！',
+                description: res.msg,
               });
             }
             setUploadLoading(false);
           }
         } catch (error) {
+          console.log('error', error);
           setUploadLoading(false);
           Modal.warning({
             maskClosable: true,
@@ -191,11 +219,9 @@ const UploadImage = forwardRef((props, ref) => {
                 onMouseEnter={() => setActiveImgIndex(index)}
                 onMouseLeave={() => setActiveImgIndex(null)}
               >
-                <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
-                  <img width="100%" key={item.uid} src={item.url} alt="" />
-                </div>
+                <div className={styles.imgBox}>{renderFile(item)}</div>
                 {activeImgIndex === index && (
-                  <div className={styles.mask}>
+                  <div className={styles.mask} key={item.uid}>
                     <EyeOutlined className={styles.maskIcon} onClick={() => handlePreview(item)} />
                     <DeleteOutlined
                       className={styles.maskIcon}

src/components/UploadImg/service.js

 import request from '@/utils/request';
 import config from '@/../config/env.config';
+import UUID from '@/utils/uuid';
 
 const { goodsApi } = config;
 
-export const merchantUpload = async files => {
-  const params = new FormData();
-  files.forEach(file => params.append('file', file));
-  const data = await request.post('/image/api/merchant/upload', {
-    prefix: goodsApi,
-    data: params,
-  });
+// export const merchantUpload = async files => {
+//   const params = new FormData();
+//   files.forEach(file => params.append('file', file));
+//   const data = await request.post('/image/api/merchant/upload', {
+//     prefix: goodsApi,
+//     data: params,
+//   });
+//   return data;
+// };
+
+export const apiFileUpload = async files => {
+  const data = await Promise.all(
+    files.map(async file => {
+      const params = new FormData();
+      params.append('file', file);
+      const uuid = UUID.createUUID();
+      if (file.name) {
+        const arr = file.name.split('.');
+        params.append('fileName', `${uuid}.${arr[arr.length - 1]}`);
+      }
+      const res = await request.post(`/api/merchants/images/uploadFile?id=${uuid}`, {
+        prefix: goodsApi,
+        data: params,
+      });
+      return res;
+    }),
+  );
+  console.log('data', data);
   return data;
 };

src/components/UploadImg/style.less

@@ -27,3 +27,9 @@
   font-size: 16px;
   cursor: pointer;
 }
+.imgBox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

src/pages/BrandManage/components/BrandInfo.jsx

@@ -13,7 +13,7 @@ const BrandInfo = props => {
   const refForm = React.useRef();
   const { actionStatus, brandId } = props;
   const closeModal = v => {
-    refForm.current?.resetFields();
+    refForm?.current?.resetFields?.();
     !v && props.onClose(false);
   };
   const getAPI = () => {
@@ -62,7 +62,7 @@ const BrandInfo = props => {
         layoutType="ModalForm"
         title="品牌信息"
         open={props.visible}
-        width="600px"
+        width="800px"
         modalProps={{
           maskClosable: true,
           destroyOnClose: true,

src/pages/BrandManage/staticData.js

@@ -142,7 +142,9 @@ export const brandInfoColumn = config => {
       formItemProps: {
         rules: [{ required: true, message: '请选择资质证书' }],
       },
-      renderFormItem: () => <UploadImage limit={10} />,
+      renderFormItem: () => (
+        <UploadImage limit={30} accept={['jpg', 'jpeg', 'png', 'zip', 'rar', 'pdf']} />
+      ),
     },
     {
       title: '授权证书',
@@ -150,7 +152,9 @@ export const brandInfoColumn = config => {
       formItemProps: {
         rules: [{ required: true, message: '请选择授权证书' }],
       },
-      renderFormItem: () => <UploadImage limit={5} />,
+      renderFormItem: () => (
+        <UploadImage limit={30} accept={['jpg', 'jpeg', 'png', 'zip', 'rar', 'pdf']} />
+      ),
     },
     {
       title: '品牌名称',

src/utils/utils.js

@@ -223,3 +223,6 @@ export const getToUrlQuery = () => {
   }
   return {};
 };
+
+// 判断是否图片类型
+export const checkIsImagePath = name => /\.(gif|jpg|jpeg|png)$/i.test(name.toLocaleLowerCase());