fix: 修改UploadImage组件适用多图上传并添加token，NiceForm中图片上传添加token

src/components/NiceForm/components/AntUpload/index.tsx

@@ -9,6 +9,9 @@ import {
   UploadOutlined,
   InboxOutlined
 } from '@ant-design/icons'
+import { getAuth } from '@/utils/auth'
+
+const { userId, memberId, token } = getAuth() || {}
 const { Dragger: UploadDragger } = AntdUpload
 
 const exts = [
@@ -250,6 +253,7 @@ export const Upload = connect({
             onChange={this.onChangeHandler}
             onRemove={this.onRemoveHandler}
             listType={'picture-card'}
+            headers={{token}}
           >
             {!others.readOnly ? (
               <UploadPlaceholder />
@@ -266,6 +270,7 @@ export const Upload = connect({
             onRemove={this.onRemoveHandler}
             // TODO image 类型是跟 picture 一样 ?
             listType={listType.indexOf('image') > -1 ? 'picture' : 'text'}
+            headers={{token}}
           >
             <p className={'ant-upload-drag-icon'}>
               <InboxOutlined />
@@ -281,6 +286,7 @@ export const Upload = connect({
           onChange={this.onChangeHandler}
           onRemove={this.onRemoveHandler}
           listType={listType}
+          headers={{token}}
         >
           {!others.readOnly ? (
             <Button style={{ margin: '0 0 10px' }}>

src/components/UploadImage/index.tsx

@@ -5,22 +5,49 @@ import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
 import { UPLOAD_TYPE } from '@/constants/index';
 import cx from 'classnames'
 import styles from './index.less'
+import { getAuth } from '@/utils/auth';
 
 interface UploadImagePorpsType {
+  /** 单个上传图片回显url */
   imgUrl?: string;
   size?: string;
-  onChange: Function;
+  onChange: any;
   disabled?: boolean;
   large?: boolean;
   fileMaxSize?: number;
   showDesc?: boolean;
-  listType?: "picture-card" | "text"
+  listType?: "picture-card" | "text",
+  /** 上传模式配置 */
+  showUploadList?: object | boolean,
+  beforeUpload?: any,
+  /** 多张上传图片列表 */
+  fileList?: any,
+  /** 最大图片数量 */
+  filelistLength?: number,
 }
 
 const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
-  const { children, imgUrl, onChange, showDesc = true, size = "386x256", disabled = false, large = false, fileMaxSize = 200, listType = "picture-card" } = props
+  const {
+    children,
+    imgUrl,
+    onChange,
+    showDesc = true,
+    size = "386x256",
+    disabled = false,
+    large = false,
+    fileMaxSize = 200,
+    listType = "picture-card",
+    showUploadList = false,
+    beforeUpload,
+    fileList = [],
+    filelistLength = 3,
+    ...restProps
+  } = props
+
   const [loading, setLoading] = useState<boolean>(false)
-  const beforeUpload = (file: UploadFile) => {
+  const { userId, memberId, token } = getAuth() || {}
+
+  const innerBeforeUpload = (file: UploadFile) => {
     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif';
     if (!isJpgOrPng) {
       message.error('仅支持上传JPEG/JPG/PNG文件!');
@@ -35,28 +62,34 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
   const uploadProps = {
     name: 'file',
     action: '/api/file/file/upload',
-    headers: {},
+    headers: { token },
     data: {
       fileType: UPLOAD_TYPE
     },
     disabled: loading || disabled,
-    showUploadList: false,
+    showUploadList: showUploadList,
     onChange(info: UploadChangeParam) {
-      if (info.file.status === 'uploading') {
-        setLoading(true)
-        return;
-      }
-      if (info.file.status === 'done') {
-        // 图片回显
-        const { code, data } = info.file.response
-        if (code === 1000) {
-          console.log('upload success')
-          onChange(data)
+      // 非列表上传
+      if(!showUploadList) {
+        if (info.file.status === 'uploading') {
+          setLoading(true)
+          return;
         }
-        setLoading(false)
+        if (info.file.status === 'done') {
+          // 图片回显
+          const { code, data } = info.file.response
+          if (code === 1000) {
+            console.log('upload success')
+            onChange(data)
+          }
+          setLoading(false)
+        }
+      } else {
+        onChange(info)
       }
     },
-    beforeUpload
+    beforeUpload: beforeUpload ? beforeUpload : innerBeforeUpload,
+    ...restProps
   };
 
   const clearImage = () => {
@@ -68,7 +101,14 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
       <p>上传图片</p>
     </Fragment>
-  );
+  )
+
+  const uploadListButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div className="ant-upload-text">上传图片</div>
+    </div>
+  )
 
   const showFileSize = () => {
     if(fileMaxSize >= 1024) {
@@ -81,7 +121,8 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
   const renderUploadComponentByListType = () => {
     switch(listType) {
       case "picture-card":
-        return (
+        return !showUploadList ?
+          // 单个待删除
           <div className={styles.upload_image_wrap} style={large ? { height: '120px' } : {}}>
             <div className={cx(styles.upload_wrap, large ? styles.large : '')}>
               <Upload {...uploadProps}>
@@ -102,7 +143,16 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
               </div>
             }
           </div>
-        )
+          :
+          // 多个列表
+          <Upload
+            listType="picture-card"
+            className="avatar-uploader"
+            fileList={fileList}
+            {...uploadProps}
+          >
+            {fileList.length >= filelistLength ? null : uploadListButton}
+          </Upload>
       case "text":
         return (
           <Upload {...uploadProps}>

src/pages/commodity/products/addProductsItem/productDescFormCloud.tsx

@@ -8,6 +8,7 @@ import { UPLOAD_TYPE } from '@/constants'
 
 import { inject, observer } from 'mobx-react'
 import { store } from '@/store'
+import { getAuth } from '@/utils/auth'
 
 enum IFeaturePlaceholder {
   '原产地描述',
@@ -23,9 +24,10 @@ enum ISalePlaceholder {
   '生产商描述与认证',
 }
 
-const ProductDescFormCloud: React.FC<{}> = (props) => { 
+const ProductDescFormCloud: React.FC<{}> = (props) => {
+  const { token } = getAuth() || {}
   // 初始商品特色4个input值和3*4个image值
-  const [fileFeatureInputList, setFileFeatureInputList] = useState<string[]>(['','','','']) 
+  const [fileFeatureInputList, setFileFeatureInputList] = useState<string[]>(['','','',''])
   const [fileFeatureImgList, setFileFeatureImgList] = useState<string[]>(['','','','','','','','','','','',''])
 
   // 初始销售特性除活动标签外的4个input值和3*4个image值
@@ -76,6 +78,7 @@ const ProductDescFormCloud: React.FC<{}> = (props) => {
     action: '/api/file/file/upload',
     showUploadList: false,
     data: { fileType: UPLOAD_TYPE },
+    headers: { token }
   }
 
   const onImageChange = (info: any, _i: number, _list: string[], _setList: Dispatch<SetStateAction<string[]>>) => {
@@ -141,9 +144,9 @@ const ProductDescFormCloud: React.FC<{}> = (props) => {
       <h3 className="commonPanelTitle" style={{marginBottom: 16}}>商品特色</h3>
       {
         fileFeatureInputList.map((item, index) => <div key={index}>
-          <Input 
+          <Input
             onChange={(e) => onInputChange(e, index, fileFeatureInputList, setFileFeatureInputList)}
-            placeholder={IFeaturePlaceholder[index]} 
+            placeholder={IFeaturePlaceholder[index]}
             value={item}
           />
           {
@@ -211,7 +214,7 @@ const ProductDescFormCloud: React.FC<{}> = (props) => {
       {
         fileTagInputList.map((item, index) => <div key={index}>
           <p style={{display: 'flex', width: index? 872 : 844}}>
-            <Input 
+            <Input
               onChange={(e) => onInputChange(e, index, fileTagInputList, setFileTagInputList)}
               placeholder={ISalePlaceholder[0]}
               value={item}
@@ -349,4 +352,4 @@ const ProductDescFormCloud: React.FC<{}> = (props) => {
   </>)
 }
 
-export default observer(ProductDescFormCloud)
\ No newline at end of file
+export default observer(ProductDescFormCloud)

src/pages/commodity/products/addProductsItem/productImageForm.tsx

@@ -11,8 +11,10 @@ import { inject, observer } from 'mobx-react'
 // import { IProductModule } from '@/module/productModule'
 // import { IStore } from '@/store';
 import { store } from '@/store'
+import { getAuth } from '@/utils/auth'
 
 const ProductImageForm: React.FC<{}> = (props) => {
+  const { token } = getAuth() || {}
   const [defaultChecked, setDefaultChecked] = useState(-1)
   const [priceAttributeParamsByRender, setPriceAttributeParamsByRender] = useState<any[]>([])
   const [commonImageList, setCommonImageList] = useState<any>([])
@@ -304,6 +306,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
                       showUploadList={{showDownloadIcon: true, downloadIcon: <EditOutlined style={{color: '#fff'}} />}}
                       data={{fileType: UPLOAD_TYPE}}
                       className="uploadBox"
+                      headers={{token}}
                     >
                       {item.commodityPic.length >= 6 ? null : uploadButton}
                     </Upload>
@@ -338,6 +341,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
                       showUploadList={{showDownloadIcon: true, downloadIcon: <EditOutlined style={{color: '#fff'}} />}}
                       data={{fileType: UPLOAD_TYPE}}
                       className="uploadBox"
+                      headers={{token}}
                     >
                       {commonImageList.length >= 6 ? null : uploadButton}
                     </Upload>

src/pages/trademark/addBrand.tsx

@@ -18,6 +18,7 @@ import { PublicApi } from '@/services/api'
 import { UPLOAD_TYPE } from '@/constants'
 import styles from './index.less'
 import { validatorByte } from '@/utils/regExp'
+import UploadImage from '@/components/UploadImage'
 
 const { Step } = Steps;
 
@@ -105,24 +106,26 @@ const AddBrand: React.FC<{}> = () => {
     form.setFieldsValue({proveUrl: obj})
   }, [fileList])
 
-  const handleUploadLogoChange = (info: UploadChangeParam) => {
-    if (info.file.status === 'uploading') {
-      setLogoLoading(true)
-      return;
-    }
-    if (info.file.status === 'done') {
-      // 图片回显
-      console.log(info)
-      const { code, data } = info.file.response
-      if (code === 1000) {
+  const handleUploadLogoChange = (data) => {
+    // if (info.file.status === 'uploading') {
+    //   setLogoLoading(true)
+    //   return;
+    // }
+    // if (info.file.status === 'done') {
+    //   // 图片回显
+    //   console.log(info)
+    //   const { code, data } = info.file.response
+    //   if (code === 1000) {
         setlogoUrl(data)
         form.setFieldsValue({logoUrl: data})
-      }
-      setLogoLoading(false)
-    }
+      // }
+      // setLogoLoading(false)
+    // }
   };
 
-  const handleChange = ({ fileList }) =>setFileList(fileList)
+  const handleChange = ({ fileList }) => {
+    setFileList(fileList)
+  }
 
   const handleSave = () => {
     setIsDisabledSave(true)
@@ -256,7 +259,7 @@ const AddBrand: React.FC<{}> = () => {
               ]}
               className={styles.uploadForm}
             >
-              <Upload
+              {/* <Upload
                 disabled={banSomeField}
                 name="file"
                 listType="picture-card"
@@ -267,8 +270,17 @@ const AddBrand: React.FC<{}> = () => {
                 onChange={handleUploadLogoChange}
                 data={{ fileType: UPLOAD_TYPE }}
               >
-                {logoUrl ? <img src={logoUrl} alt="avatar" style={{ width: '100%' }} /> : uploadLogoButton}
-              </Upload>
+                {logoUrl ? <img src={logoUrl} alt="avatar" style={{ width: 102, height: 102, objectFit: 'cover' }} /> : uploadLogoButton}
+              </Upload> */}
+              <UploadImage
+                disabled={banSomeField}
+                listType="picture-card"
+                showUploadList={false}
+                beforeUpload={beforeLogoUpload}
+                onChange={handleUploadLogoChange}
+                imgUrl={logoUrl}
+                fileMaxSize={60}
+              />
             </Form.Item>
         </Card>
       </Space>
@@ -283,7 +295,7 @@ const AddBrand: React.FC<{}> = () => {
                 name="proveUrl"
                 // valuePropName="fileList"
               >
-                <Upload
+                {/* <Upload
                   name="file"
                   listType="picture-card"
                   className="avatar-uploader"
@@ -295,7 +307,15 @@ const AddBrand: React.FC<{}> = () => {
                   showUploadList={{ showPreviewIcon: false }}
                 >
                   {fileList.length >= 20 ? null : uploadButton}
-                </Upload>
+                </Upload> */}
+                <UploadImage
+                  listType="picture-card"
+                  fileList={fileList}
+                  filelistLength={20}
+                  beforeUpload={beforeUpload}
+                  onChange={handleChange}
+                  showUploadList={{ showPreviewIcon: false }}
+                />
               </Form.Item>
             </Col>
           </Row>