refactor: 文件类型判断
This commit is contained in:
parent
26ee8e28ea
commit
663bad5e71
@ -1,3 +1,11 @@
|
|||||||
|
import { fileTypeFromBlob } from '@vben/utils';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO: file-upload暂时使用 需要进行重构
|
||||||
|
* @param file file对象
|
||||||
|
* @param accepts 文件类型数组 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
|
||||||
|
* @returns 是否通过文件类型校验
|
||||||
|
*/
|
||||||
export function checkFileType(file: File, accepts: string[]) {
|
export function checkFileType(file: File, accepts: string[]) {
|
||||||
let reg;
|
let reg;
|
||||||
if (!accepts || accepts.length === 0) {
|
if (!accepts || accepts.length === 0) {
|
||||||
@ -9,24 +17,30 @@ export function checkFileType(file: File, accepts: string[]) {
|
|||||||
return reg.test(file.name);
|
return reg.test(file.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function checkImgType(file: File) {
|
/**
|
||||||
return isImgTypeByName(file.name);
|
* 默认图片类型
|
||||||
}
|
*/
|
||||||
|
export const defaultImageAccept = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
||||||
export function isImgTypeByName(name: string) {
|
/**
|
||||||
return /\.(?:jpg|jpeg|png|gif|webp)$/i.test(name);
|
* 判断文件类型是否符合要求
|
||||||
}
|
* @param file file对象
|
||||||
|
* @param accepts 文件类型数组 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
|
||||||
export function getBase64WithFile(file: File) {
|
* @returns 是否通过文件类型校验
|
||||||
return new Promise<{
|
*/
|
||||||
file: File;
|
export async function checkImageFileType(file: File, accepts: string[]) {
|
||||||
result: string;
|
// 空的accepts 使用默认规则
|
||||||
}>((resolve, reject) => {
|
if (!accepts || accepts.length === 0) {
|
||||||
const reader = new FileReader();
|
accepts = defaultImageAccept;
|
||||||
reader.readAsDataURL(file);
|
}
|
||||||
reader.addEventListener('load', () =>
|
const fileType = await fileTypeFromBlob(file);
|
||||||
resolve({ result: reader.result as string, file }),
|
if (!fileType) {
|
||||||
);
|
console.error('无法获取文件类型');
|
||||||
reader.addEventListener('error', (error) => reject(error));
|
return false;
|
||||||
});
|
}
|
||||||
|
console.log('文件类型', fileType);
|
||||||
|
// 是否文件拓展名/文件头任意有一个匹配
|
||||||
|
if (accepts.includes(fileType.ext) || accepts.includes(fileType.mime)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@ import { isArray, isFunction, isObject, isString } from 'lodash-es';
|
|||||||
|
|
||||||
import { uploadApi } from '#/api';
|
import { uploadApi } from '#/api';
|
||||||
|
|
||||||
import { checkFileType } from './helper';
|
import { checkImageFileType, defaultImageAccept } from './helper';
|
||||||
import { UploadResultStatus } from './typing';
|
import { UploadResultStatus } from './typing';
|
||||||
import { useUploadType } from './use-upload';
|
import { useUploadType } from './use-upload';
|
||||||
|
|
||||||
@ -21,9 +21,7 @@ defineOptions({ name: 'ImageUpload', inheritAttrs: false });
|
|||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
/**
|
/**
|
||||||
* 建议使用拓展名(不带.)
|
* 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
|
||||||
* 或者文件头 image/png等(测试判断不准确) 不支持image/*类似的写法
|
|
||||||
* 需自行改造 ./helper/checkFileType方法
|
|
||||||
*/
|
*/
|
||||||
accept?: string[];
|
accept?: string[];
|
||||||
api?: (...args: any[]) => Promise<any>;
|
api?: (...args: any[]) => Promise<any>;
|
||||||
@ -49,7 +47,7 @@ const props = withDefaults(
|
|||||||
helpText: '',
|
helpText: '',
|
||||||
maxSize: 2,
|
maxSize: 2,
|
||||||
maxNumber: 1,
|
maxNumber: 1,
|
||||||
accept: () => [],
|
accept: () => defaultImageAccept,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
api: uploadApi,
|
api: uploadApi,
|
||||||
resultField: '',
|
resultField: '',
|
||||||
@ -158,9 +156,9 @@ const handleCancel = () => {
|
|||||||
previewTitle.value = '';
|
previewTitle.value = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
const beforeUpload = (file: File) => {
|
const beforeUpload = async (file: File) => {
|
||||||
const { maxSize, accept } = props;
|
const { maxSize, accept } = props;
|
||||||
const isAct = checkFileType(file, accept);
|
const isAct = await checkImageFileType(file, accept);
|
||||||
if (!isAct) {
|
if (!isAct) {
|
||||||
message.error($t('component.upload.acceptUpload', [accept]));
|
message.error($t('component.upload.acceptUpload', [accept]));
|
||||||
isActMsg.value = false;
|
isActMsg.value = false;
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vben-core/shared": "workspace:*",
|
"@vben-core/shared": "workspace:*",
|
||||||
"@vben-core/typings": "workspace:*",
|
"@vben-core/typings": "workspace:*",
|
||||||
|
"file-type": "^19.5.0",
|
||||||
"vue-router": "catalog:"
|
"vue-router": "catalog:"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,3 +2,4 @@ export * from './helpers';
|
|||||||
export * from '@vben-core/shared/cache';
|
export * from '@vben-core/shared/cache';
|
||||||
export * from '@vben-core/shared/color';
|
export * from '@vben-core/shared/color';
|
||||||
export * from '@vben-core/shared/utils';
|
export * from '@vben-core/shared/utils';
|
||||||
|
export * from 'file-type';
|
||||||
|
624
pnpm-lock.yaml
624
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user