上传文件展示图
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;