新增上传前裁图步骤

package-lock.json

@@ -19,6 +19,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
         "antd": "^5.5.2",
+        "antd-img-crop": "^4.12.2",
         "babel-polyfill": "^6.26.0",
         "core-js": "^3.31.0",
         "flv.js": "^1.6.2",
@@ -5395,6 +5396,21 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/antd-img-crop": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/antd-img-crop/-/antd-img-crop-4.12.2.tgz",
+      "integrity": "sha512-xgxR3x2sg+tCBHMfx1gejEfhhvnIL2mpZ4OIPfQDJZTTfm9YpMqaqLF9qWbF9Nf83bXCdaQywYihcVGyw3niDg==",
+      "dependencies": {
+        "compare-versions": "6.0.0-rc.1",
+        "react-easy-crop": "^4.7.4",
+        "tslib": "^2.5.0"
+      },
+      "peerDependencies": {
+        "antd": ">=4.0.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/antd/node_modules/throttle-debounce": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
@@ -8989,6 +9005,11 @@
       "resolved": "https://registry.npmmirror.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
       "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
     },
+    "node_modules/compare-versions": {
+      "version": "6.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.0.0-rc.1.tgz",
+      "integrity": "sha512-cFhkjbGY1jLFWIV7KegECbfuyYPxSGvgGkdkfM+ibboQDoPwg2FRHm5BSNTOApiauRBzJIQH7qvOJs2sW5ueKQ=="
+    },
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -15561,6 +15582,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "node_modules/npmlog": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/npmlog/-/npmlog-5.0.1.tgz",
@@ -18406,6 +18432,24 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-easy-crop": {
+      "version": "4.7.5",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-4.7.5.tgz",
+      "integrity": "sha512-qKfI4PuhaH1jOLC3DQfQB0cE0z+3N7bfyPkPejQmylXNb8nstfPMH+oHj3gKgpBHLFUiQp/C1rY7sVCVgtjn3Q==",
+      "dependencies": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "2.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
+    "node_modules/react-easy-crop/node_modules/tslib": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "antd": "^5.5.2",
+    "antd-img-crop": "^4.12.2",
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.31.0",
     "flv.js": "^1.6.2",

src/app-pages/CreateAlbumPage.jsx

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import { Form, Input, Row, Col, Select, Upload, Modal, message } from 'antd';
+import ImgCrop from 'antd-img-crop';
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
 import * as coursesAPI from '../apis/coursesAPI';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -227,15 +228,17 @@ function CreateAlbum(param) {
             label='封面'
             style={{ height: '102px' }}
             labelCol={{ span: 4 }}>
-            <Upload
-              listType='picture-card'
-              fileList={fileList}
-              accept='image/jpeg,image/png,image/jpg'
-              beforeUpload={beforeUpload}
-              onPreview={handlePreview}
-              onChange={handleChange}>
-              {fileList.length >= 1 ? null : uploadButton}
-            </Upload>
+            <ImgCrop aspect={16 / 9} quality={1}>
+              <Upload
+                listType='picture-card'
+                fileList={fileList}
+                accept='image/jpeg,image/png,image/jpg'
+                beforeUpload={beforeUpload}
+                onPreview={handlePreview}
+                onChange={handleChange}>
+                {fileList.length >= 1 ? null : uploadButton}
+              </Upload>
+            </ImgCrop>
           </Form.Item>
         </Col>
       </Row>

src/app-pages/CreateCoursePage.jsx

@@ -12,6 +12,7 @@ import {
   Modal,
   message,
 } from 'antd';
+import ImgCrop from 'antd-img-crop';
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
 import * as coursesAPI from '../apis/coursesAPI';
 import React, { useEffect, useState } from 'react';
@@ -722,15 +723,17 @@ function CreateCourse(param) {
             label='封面'
             style={{ height: '102px' }}
             labelCol={{ span: 4 }}>
-            <Upload
-              listType='picture-card'
-              fileList={fileList}
-              accept='image/jpeg,image/png,image/jpg'
-              beforeUpload={beforeUpload}
-              onPreview={handlePreview}
-              onChange={handleChange}>
-              {fileList.length >= 1 ? null : uploadButton}
-            </Upload>
+            <ImgCrop aspect={16 / 9} quality={1}>
+              <Upload
+                listType='picture-card'
+                fileList={fileList}
+                accept='image/jpeg,image/png,image/jpg'
+                beforeUpload={beforeUpload}
+                onPreview={handlePreview}
+                onChange={handleChange}>
+                {fileList.length >= 1 ? null : uploadButton}
+              </Upload>
+            </ImgCrop>
           </Form.Item>
         </Col>
       </Row>