fix:商品图片上传前裁剪

package.json

@@ -38,6 +38,7 @@
     "@umijs/hooks": "^1.9.3",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
+    "antd-img-crop": "^3.12.0",
     "bizcharts": "^4.0.14",
     "copy-to-clipboard": "^3.3.1",
     "god": "0.1.28",
@@ -80,4 +81,4 @@
     "json2ts": "^0.0.7",
     "ora": "^4.0.4"
   }
-}
+}
\ No newline at end of file

src/components/ImageCrop/index.tsx

@@ -51,7 +51,6 @@ const ImageCrop: React.FC<ImageCropProps> = props => {
 
   const { visible, imgUrl, handleConfirm, handleWithDraw } = props;
 
-
   // 裁剪后生成url传回父级回调
   const startCrop = (previewCanvas: ReactNode, crop: any) => {
     // console.log(previewCanvas, crop);

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

@@ -5,6 +5,7 @@ import cx from 'classnames'
 import styles from '../index.less'
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
 import { UPLOAD_TYPE } from '@/constants'
+import ImgCrop from 'antd-img-crop';
 
 import { inject, observer } from 'mobx-react'
 import { store } from '@/store'
@@ -34,7 +35,7 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
     // 品类 变动清空数据
     // 编辑下 flag为false 不清空；编辑下 flag为true 新建清空
     if(history.location.query?.id && !flagRef.current) {
-      flagRef.current = true 
+      flagRef.current = true
     } else {
       setFileImageList([])
       setVideoList([])
@@ -167,6 +168,7 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
     }
     <div className={styles.descriptBox}>
       <div className={styles.middleAddBtn}>
+        <ImgCrop rotate>
         <Upload {...uploadImgProps}>
           <Button size="small" type="text">
             <PlusOutlined />
@@ -174,6 +176,7 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
           <br/>
           <span>添加图片</span>
         </Upload>
+        </ImgCrop>
       </div>
     </div>
     </Spin>

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

@@ -5,6 +5,7 @@ import { EditOutlined, PlusOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { UploadFile } from 'antd/lib/upload/interface';
 import { UPLOAD_TYPE } from '@/constants'
+import ImgCrop from 'antd-img-crop';
 
 import { inject, observer } from 'mobx-react'
 // import { IProductModule } from '@/module/productModule'
@@ -263,6 +264,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
               <div key={index+100} style={defaultChecked == index ? {display: 'block'} : {display: 'none'}}>
                 <div className={styles.pictureCardBox}>
                   <div className="clearfix">
+                    <ImgCrop rotate>
                     <Upload
                       name="file"
                       id={`uploadEle${index}`}
@@ -278,6 +280,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
                     >
                       {item.commodityPic.length >= 6 ? null : uploadButton}
                     </Upload>
+                    </ImgCrop>
                   </div>
                 </div>
                 <Alert
@@ -294,6 +297,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
             : <div style={defaultChecked == 0 ? {display: 'block'} : {display: 'none'}}> {/* -1 */}
                 <div className={styles.pictureCardBox}>
                   <div className="clearfix">
+                    <ImgCrop rotate>
                     <Upload
                       name="file"
                       action="/api/file/file/upload"
@@ -309,6 +313,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
                     >
                       {commonImageList.length >= 6 ? null : uploadButton}
                     </Upload>
+                    </ImgCrop>
                   </div>
                 </div>
                 <Alert