优化：上传文件进度条

src/api/modules/common.ts

@@ -16,9 +16,9 @@ import {
   updateBannerInfo,
   updateModuleInfo,
   updateModuleInfoRemark,
-  uploadOssBPType,
   uploadOssType,
 } from '~/api/interface/commonType';
+import { AxiosRequestConfig } from 'axios';
 
 export class CommonAPI {
   // 用户登录
@@ -29,7 +29,8 @@ export class CommonAPI {
   static uploadOss: uploadOssType = (params) => axios.post('/pms/upload/oss', params);
 
   // 断点上传
-  static uploadOssBP: uploadOssBPType = (params) => axios.post('/pms/upload/breakpoint', params);
+  static uploadOssBP = (params: any, config?: AxiosRequestConfig<any>) =>
+    axios.post('/pms/upload/breakpoint', params, config);
 
   // V1.0.1-宣传模块管理-分页
   static listModuleInfoPage: listModuleInfoPage = (params) =>

src/components/uploader/index.tsx

 import React, { useEffect, useState } from 'react';
-import { message, Upload, UploadProps } from 'antd';
+import { message, Progress, Upload, UploadProps } from 'antd';
 import { CommonAPI } from '~/api';
 import './index.scss';
 import Viewer from '~/components/viewer';
@@ -44,6 +44,10 @@ export const Uploader: React.FC<PropsType> = (props) => {
     defaultFileList,
     disabled,
   } = props;
+  // 开始上传
+  const [uploading, setUploading] = useState<boolean>(false);
+  // 上传进度
+  const [progress, setProgress] = useState(0);
   // 是否上传图片
   const [visible, setVisible] = useState<boolean>(false);
   // 当前选择的文件
@@ -67,7 +71,7 @@ export const Uploader: React.FC<PropsType> = (props) => {
         return isSize;
       }
     },
-    customRequest: (res) => {
+    customRequest: (options) => {
       if (fileList.length >= (fileLength || 1)) {
         message.error(`最多上传${fileLength || 1}个文件`).then();
         return;
@@ -75,34 +79,41 @@ export const Uploader: React.FC<PropsType> = (props) => {
       if (fileUpload) {
         // 上传到服务器
         const formData = new FormData();
-        formData.append('uploadFile', res.file);
-        CommonAPI.uploadOssBP(formData).then(({ result }) => {
-          setFileList([
-            ...fileList,
-            {
-              id: new Date().getTime(),
-              uid: new Date().getTime(),
-              name: (res.file as any).name,
-              url: result,
-            },
-          ]);
-          onChange?.([
+        formData.append('uploadFile', options.file);
+        CommonAPI.uploadOssBP(formData, {
+          onUploadProgress: ({ total, loaded }) => {
+            // 计算上传的百分比
+            const percent = Math.round((loaded / (total || 1)) * 100);
+            // 调用onProgress回调函数
+            options?.onProgress?.({ percent });
+            // 更新进度条的状态
+            setProgress(percent);
+            // 开始上传
+            setUploading(true);
+          },
+        }).then(({ result }: any) => {
+          const arr = [
             ...fileList,
             {
               id: new Date().getTime(),
               uid: new Date().getTime(),
-              name: (res.file as any).name,
+              name: (options.file as any).name,
               url: result,
             },
-          ]);
+          ];
+          setFileList(arr);
+          onChange?.(arr);
+          // 上传成功
+          setUploading(false);
         });
       } else {
-        setFileList([...fileList, res.file]);
-        onChange?.([...fileList, res.file]);
+        setFileList([...fileList, options.file]);
+        onChange?.([...fileList, options.file]);
       }
     },
     onRemove: (res) => {
       const newFileList = fileList.filter((item) => item.uid !== res.uid);
+      setProgress(0);
       setFileList(newFileList);
       onChange?.(newFileList);
     },
@@ -142,13 +153,23 @@ export const Uploader: React.FC<PropsType> = (props) => {
   return (
     <div className='uploader-view'>
       {listType === 'text' ? (
-        <Upload {...uploadProps} style={{ width: '100%' }} disabled={disabled}>
-          <>{fileList.length < (fileLength || 1) && children}</>
-        </Upload>
+        <>
+          <Upload {...uploadProps} style={{ width: '100%' }} disabled={disabled || uploading}>
+            <>{fileList.length < (fileLength || 1) && children}</>
+          </Upload>
+          {progress > 0 && uploading && (
+            <Progress percent={progress} size={'small'} style={{ height: '50px' }} />
+          )}
+        </>
       ) : (
-        <Upload {...uploadProps} style={{ width: '100%' }} disabled={disabled}>
-          {fileList.length < (fileLength || 1) && children}
-        </Upload>
+        <>
+          <Upload {...uploadProps} style={{ width: '100%' }} disabled={disabled || uploading}>
+            {fileList.length < (fileLength || 1) && children}
+          </Upload>
+          {progress > 0 && uploading && (
+            <Progress percent={progress} size={'small'} style={{ height: '50px' }} />
+          )}
+        </>
       )}
       <Viewer
         visible={visible}

src/pages/pilotTraining/courseManage/comp/addEditModal/index.tsx

@@ -166,8 +166,9 @@ const AddEditModal: React.FC<propType> = (props) => {
           name='surfaceUrl'
           rules={[{ required: true, message: '请上传课程封面' }]}
           style={{ marginBottom: '-40px' }}
+          wrapperCol={{ span: 12 }}
         >
-          <div>
+          <div style={{ minHeight: '100px' }}>
             <Uploader
               listType={'picture-card'}
               fileUpload
@@ -179,7 +180,16 @@ const AddEditModal: React.FC<propType> = (props) => {
             >
               <PlusOutlined />
             </Uploader>
-            <div style={{ opacity: '0.68', transform: 'scale(0.86) translate(60px, -68px)' }}>
+            <div
+              style={{
+                opacity: '0.68',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                fontSize: '10px',
+                width: '200px',
+              }}
+            >
               添加图片
               <br />
               建议尺寸750*420或比例16:9，小于5M的 JPG、PNG格式图片
@@ -191,20 +201,30 @@ const AddEditModal: React.FC<propType> = (props) => {
           name='videoUrl'
           rules={[{ required: true, message: '请上传课程视频' }]}
           style={{ marginBottom: '-40px' }}
+          wrapperCol={{ span: 12 }}
         >
-          <div>
+          <div style={{ minHeight: '100px' }}>
             <Uploader
-              listType={'picture'}
+              listType={'picture-card'}
               fileUpload
               fileLength={1}
               fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
               fileSize={512}
-              onChange={(e) => form.setFieldValue('videoUrl', e[0].url)}
+              onChange={(e) => form.setFieldValue('videoUrl', e[0]?.url)}
               defaultFileList={data?.videoUrl ? [{ url: data?.videoUrl }] : []}
             >
               <PlusOutlined />
             </Uploader>
-            <div style={{ opacity: '0.68', transform: 'scale(0.86) translate(60px, -68px)' }}>
+            <div
+              style={{
+                opacity: '0.68',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                fontSize: '10px',
+                width: '200px',
+              }}
+            >
               从本地上传视频
               <br />
               支持mp4，avi，wmv，mov，flv， rmvb，3gp，m4v，mkv格式； 文件最大不超过1G。