fix:商品图片可每张替换，商品描述上传显示加载中

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

 import React, { useState, useEffect, useRef } from 'react'
 import {history} from 'umi'
-import { Button, message, Upload } from 'antd'
+import { Button, message, Upload, Spin } from 'antd'
 import cx from 'classnames'
 import styles from '../index.less'
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
@@ -13,6 +13,7 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
   const [fileImageList, setFileImageList] = useState<any>([])
   const [videoList, setVideoList] = useState<any>([])
   const flagRef = useRef<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false) // 上传的加载状态
 
   const { ProductStore } = store
   const { productInfoByEdit, setProductDescription, selectCategoryId } = ProductStore
@@ -56,27 +57,17 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
     showUploadList: false,
     data: { fileType: UPLOAD_TYPE },
     onChange(info) {
+      setIsLoading(true)
       if (info.file.status === 'done') {
         message.success(`${info.file.name} 文件上传成功`);
-        // console.log(info.file.response)
         if(Array.isArray(fileImageList)){
           setFileImageList([...fileImageList, info.file.response.data])
-          // 设置传输数据
-          // setProductDescription({
-          //   video: videoList,
-          //   image: [...fileImageList, info.file.response.data],
-          //   word: []
-          // })
         }else{
           setFileImageList([info.file.response.data])
-          // 设置传输数据
-          // setProductDescription({
-          //   video: videoList,
-          //   image: [info.file.response.data],
-          //   word: []
-          // })
         }
+        setIsLoading(false)
       } else if (info.file.status === 'error') {
+        setIsLoading(false)
         message.error(`${info.file.name} 文件上传失败`);
       }
     },
@@ -96,44 +87,34 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
       // return isVideo
     // },
     onChange(info) {
+      setIsLoading(true)
       if (info.file.status === 'done') {
         message.success(`${info.file.name} 文件上传成功`);
         if(Array.isArray(videoList)){
           setVideoList([...videoList, info.file.response.data])
-          // 设置传输数据
-          // setProductDescription({
-          //   video: [...videoList],
-          //   image: fileImageList,
-          //   word: []
-          // })
         }else{
           setVideoList([info.file.response.data])
-          // 设置传输数据
-          // setProductDescription({
-          //   video: [info.file.response.data],
-          //   image: fileImageList,
-          //   word: []
-          // })
         }
+        setIsLoading(false)
       } else if (info.file.status === 'error') {
+        setIsLoading(false)
         message.error(`${info.file.name} 文件上传失败`);
       }
     },
   }
 
   const handleDeleteVideo = (_index: number) => {
-    // console.log(_index, '删除的视频索引')
     setVideoList([])
   }
 
   const handleDeleteImage = (_index: number) => {
-    // console.log(_index, '删除的图片索引')
     let imageArr = [...fileImageList]
     imageArr.splice(_index, 1)
     setFileImageList(imageArr)
   }
 
-  return (<>
+  return (<div>
+    <Spin spinning={isLoading}>
     {
       videoList?.length>0 
       ? 
@@ -195,7 +176,8 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
         </Upload>
       </div>
     </div>
-  </>)
+    </Spin>
+  </div>)
 }
 
 export default observer(ProductDescFormDefualt)
\ No newline at end of file

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

 import React, { useState, useEffect, useRef } from 'react'
 import {history} from 'umi'
-import { message, Modal, Row, Col, Alert, Upload, Radio } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
+import { message, Modal, Row, Col, Alert, Upload, Radio, Button } from 'antd'
+import { EditOutlined, PlusOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { UploadFile } from 'antd/lib/upload/interface';
 import { UPLOAD_TYPE } from '@/constants'
@@ -19,8 +19,14 @@ const ProductImageForm: React.FC<{}> = (props) => {
   const [previewImage, setPreviewImage] = useState('')
   const [previewTitle, setPreviewTitle] = useState('')
   const [setImageType, setSetImageType] = useState<boolean>(true)
+
+  const [openFileDialogFlag, setOpenFileDialogFlag] = useState<boolean>(false)
   const flagRef = useRef<boolean>(false)
 
+  // 选中的图片
+  const uploadFileSelectRef = useRef<any>({})
+  const editRowIndexRef = useRef<number>(0)
+
   const { ProductStore } = store
   const { priceAttributeParams, productInfoByEdit, setProductAttributeAndImageParams, setIsAllAttributePic, selectCategoryId } = ProductStore
 
@@ -72,7 +78,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
 
         let _commodityPicItem = Array.isArray(_pic) ? _pic.map((__ele, __i) => {
           return {
-            uid: __i * -1,
+            uid: (__i+1) * -1,
             status: 'done',
             url: __ele,
           }
@@ -166,14 +172,27 @@ const ProductImageForm: React.FC<{}> = (props) => {
 
   const handleChange = ({ file, fileList }, index) => {
     let _priceAttributeParams = [...priceAttributeParamsByRender]
-    // console.log(fileList, file?.response?.data, '响应')
+    // console.log(fileList, file, index, editRowIndexRef, '响应')
+    // console.log(uploadFileSelectRef.current)
+
+    const selectUuid = uploadFileSelectRef.current.uid
+    if (selectUuid) {
+      // 点了图片编辑
+      const editPicIndex = fileList.findIndex(v => v.uid === selectUuid)
+      // console.log(editPicIndex)
+      fileList.splice(editPicIndex, 1, file)
+      if (fileList.length > 1) {
+        fileList.pop()
+      }
+      uploadFileSelectRef.current = {}
+    }
     setCommonImageList(fileList)
-    // if(file?.response?.data){ // 服务端是否响应正常url字符
-      _priceAttributeParams[index].commodityPic = fileList
-    // }
+
+    // console.log(index||editRowIndexRef.current, fileList, '132456')
+    _priceAttributeParams[index||editRowIndexRef.current].commodityPic = fileList
     if(!file?.status && file?.status !== 'done'){
-      let ttt = _priceAttributeParams[index].commodityPic.filter(_ => _.status === 'done')
-      _priceAttributeParams[index].commodityPic = ttt
+      let ttt = _priceAttributeParams[index||editRowIndexRef.current].commodityPic.filter(_ => _.status === 'done')
+      _priceAttributeParams[index||editRowIndexRef.current].commodityPic = ttt
       setCommonImageList(ttt)
     }
     setPriceAttributeParamsByRender(_priceAttributeParams)
@@ -194,6 +213,15 @@ const ProductImageForm: React.FC<{}> = (props) => {
     setCommonImageList([])
   }
 
+  const handlefileEdit = (file, index) => {
+    // console.log(file, index)
+    const uploadEle = document.querySelector(`#uploadEle${index}`) as any
+    uploadFileSelectRef.current = (file)
+    editRowIndexRef.current = index
+    // 触发图片上传
+    uploadEle.click()
+  }
+
   return (<div>
     <div style={{marginBottom:15}}>设置方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <Radio.Group onChange={onChangeSetImageType} value={setImageType}>
@@ -227,6 +255,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
             }
           </ul>
         </Col>
+        {/* 按属性设置---所有属性共用 */}
         <Col span={20} style={{ padding: 24 }}>
           {
             !setImageType ?
@@ -236,12 +265,15 @@ const ProductImageForm: React.FC<{}> = (props) => {
                   <div className="clearfix">
                     <Upload
                       name="file"
+                      id={`uploadEle${index}`}
                       action="/api/file/file/upload"
                       listType="picture-card"
                       fileList={item.commodityPic}
                       beforeUpload={beforeUpload}
                       onPreview={handlePreview}
                       onChange={(files)=>handleChange(files, index)}
+                      onDownload={(file)=>handlefileEdit(file, index)}
+                      showUploadList={{showDownloadIcon: true, downloadIcon: <EditOutlined style={{color: '#fff'}} />}}
                       data={{fileType: UPLOAD_TYPE}}
                     >
                       {item.commodityPic.length >= 6 ? null : uploadButton}
@@ -265,11 +297,14 @@ const ProductImageForm: React.FC<{}> = (props) => {
                     <Upload
                       name="file"
                       action="/api/file/file/upload"
+                      id='uploadEle0'
                       listType="picture-card"
                       fileList={commonImageList}
                       beforeUpload={beforeUpload}
                       onPreview={handlePreview}
                       onChange={(files)=>handleChange(files, 0)} //-1
+                      onDownload={(file)=>handlefileEdit(file, 0)}
+                      showUploadList={{showDownloadIcon: true, downloadIcon: <EditOutlined style={{color: '#fff'}} />}}
                       data={{fileType: UPLOAD_TYPE}}
                     >
                       {commonImageList.length >= 6 ? null : uploadButton}