react 关于各类文件上传到AWS3的方法封装

 上传文件展示图  

AWS相关的方法和获取信息的封装

import ServerConfig from '@/utils/request';
import S3 from 'react-aws-s3';
// import { getMessage } from '../chat/chat';
import { message } from 'antd';
const config = {
  bucketName: ServerConfig.uploadBucketName,
  region: ServerConfig.uploadRegion,
  accessKeyId: ServerConfig.uploadAccessKeyId,
  secretAccessKey: ServerConfig.uploadSecretAccessKey,
};
const ReactS3Client = new S3(config);

/**
 * uploadAws
 * @param options file onSuccess
 * @param dispatch react hook
 * @param getReceiver
 */

/**
 * Get file type
 * @param fileName
 */
export const getFileType = (fileName: string) => {
  const pdfReg = /^.+(\.pdf|\/pdf)$/;
  const txtReg = /^.+(\/plain|.plain)$/;
  const wordReg = /^.+(\.msword|\.document|\/msword)$/;
  const excelReg = /^.+(\.ms-excel|\.sheet)$/;
  const jpgReg = /^.+(\.png|\.jpg|\.jpeg|\.bmp|\/png|\/jpg|\/jpeg|\/bmp)$/;
  const zipReg = /^.+(\.zip|\/zip)$/;
  if (pdfReg.test(fileName)) {
    return 'pdf';
  }
  if (txtReg.test(fileName)) {
    return 'txt';
  }
  if (wordReg.test(fileName)) {
    return 'word';
  }
  if (excelReg.test(fileName)) {
    return 'excel';
  }
  if (jpgReg.test(fileName)) {
    return 'picture';
  }
  if (zipReg.test(fileName)) {
    return 'zip';
  }
  return 'undefined';
};
/**
 *
 * @param options
 * @param dispatch
 * @returns
 */

export const uploadFileAws3 = (options: any, dispatch: any) => {
  const { file, onSuccess } = options;
  const { name } = file;
  const messageType = getFileType(file.type);

  if (messageType === 'undefined') {
    message.warning('Type does not support uploading');
    return;
  }

  dispatch({
    type: 'upload/changeUploadFileName',
    payload: {
      uploadFileName: name,
      uploadFileType: messageType,
    },
  });

  /**
   * Monitor upload progress
   * @param progressEvent
   */
  const onProgress = (progressEvent: { loaded: number; total: number }) => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    dispatch({
      type: 'upload/changeIsUploading',
      payload: {
        isUploading: true,
      },
    });
    dispatch({
      type: 'upload/changeUploadPercent',
      payload: {
        percentCompleted: percentCompleted,
      },
    });
  };

  ReactS3Client.uploadFile(file, onProgress)
    .then((res) => {
      dispatch({
        type: 'upload/changeIsUploading',
        payload: {
          isUploading: true,
        },
      });

      dispatch({
        type: 'upload/changeUploadFileUrl',
        payload: {
          fileKey: res.key,
          fileUrl: res.location,
          fileName: name,
        },
      });

      onSuccess(res, file);
    })
    .catch((err: any) => {
      dispatch({
        type: 'upload/changeIsUploading',
        payload: {
          isUploading: false,
        },
      });

      dispatch({
        type: 'upload/changeUploadFileName',
        payload: {
          uploadFileName: '',
        },
      });

      dispatch({
        type: 'upload/changeUploadPercent',
        payload: {
          uploadPercent: 0,
        },
      });

      if (err.message === 'cancel') {
        message.success('Cancel upload successful');
      } else {
        message.error('Upload failed');
      }
    });
};

models目录下----upload的方法封装

import type { Effect, ImmerReducer } from 'umi';

export interface UploadState {
  uploadFile: {
    fileKey: string;
    fileUrl: string;
    fileName: string;
  };
  uploadFileName: string;
  isChatUpload: boolean;
  //uploadPercent
  uploadPercent?: number;
  // is uploading
  isUploading?: boolean;
  uploadFileType?: string;
  uploadFileList?: any;
}

interface UploadType {
  namespace: 'upload';
  state: UploadState;
  effects: {
    changePhoto: Effect;
  };
  reducers: {
    changeUploadFileName: ImmerReducer<UploadState>;
    changeUploadFileUrl: ImmerReducer<UploadState>;
    changeIsUploading: ImmerReducer<UploadState>;
    changeUploadPercent: ImmerReducer<UploadState>;
    changeIsChatUpload: ImmerReducer<UploadState>;
  };
}

const UploadModel: UploadType = {
  namespace: 'upload',
  state: {
    uploadFile: {
      fileKey: '',
      fileUrl: '',
      fileName: '',
    },
    uploadFileName: '',
    isChatUpload: true,
    uploadPercent: 0,
    isUploading: false,
  },
  effects: {
    *changePhoto(action, { put }) {
      yield put({
        type: 'changeUploadFileName',
        payload: {
          uploadFileName: '',
        },
      });
    },
  },
  reducers: {
    changeUploadFileName(state, { payload }) {
      return {
        ...state,
        uploadFileName: payload.uploadFileName,
        uploadFileType: payload.uploadFileType,
        // uploadFileList:payload.uploadFileList
      };
    },
    changeUploadFileUrl(state, { payload }) {
      const { fileUrl, fileName, fileKey } = payload;
      return {
        ...state,
        uploadFile: {
          fileKey,
          fileName,
          fileUrl,
        },
      };
    },
    changeIsUploading(state, { payload }) {
      console.log(payload);
      return {
        ...state,
        isUploading: payload.isUploading,
      };
    },
    changeUploadPercent(state, { payload }) {
      return {
        ...state,
        uploadPercent: payload.percentCompleted,
      };
    },
    changeIsChatUpload(state, { payload }) {
      return {
        ...state,
        isChatUpload: payload.isChatUpload,
      };
    },
  },
};

export default UploadModel;