feat: import form vben/utils
This commit is contained in:
@@ -1,8 +1,3 @@
|
|||||||
/**
|
|
||||||
* 默认图片类型
|
|
||||||
*/
|
|
||||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
|
||||||
|
|
||||||
export function checkFileType(file: File, accepts: string[]) {
|
export function checkFileType(file: File, accepts: string[]) {
|
||||||
if (!accepts || accepts.length === 0) {
|
if (!accepts || accepts.length === 0) {
|
||||||
return true;
|
return true;
|
||||||
@@ -11,10 +6,3 @@ export function checkFileType(file: File, accepts: string[]) {
|
|||||||
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
||||||
return reg.test(file.name);
|
return reg.test(file.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function checkImgType(
|
|
||||||
file: File,
|
|
||||||
accepts: string[] = defaultImageAccepts,
|
|
||||||
) {
|
|
||||||
return checkFileType(file, accepts);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -10,11 +10,16 @@ import { computed, ref, toRefs, watch } from 'vue';
|
|||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
import { IconifyIcon } from '@vben/icons';
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
import { isFunction, isObject, isString } from '@vben/utils';
|
import {
|
||||||
|
defaultImageAccepts,
|
||||||
|
isFunction,
|
||||||
|
isImage,
|
||||||
|
isObject,
|
||||||
|
isString,
|
||||||
|
} from '@vben/utils';
|
||||||
|
|
||||||
import { message, Modal, Upload } from 'ant-design-vue';
|
import { message, Modal, Upload } from 'ant-design-vue';
|
||||||
|
|
||||||
import { checkImgType, defaultImageAccepts } from './helper';
|
|
||||||
import { UploadResultStatus } from './typing';
|
import { UploadResultStatus } from './typing';
|
||||||
import { useUpload, useUploadType } from './use-upload';
|
import { useUpload, useUploadType } from './use-upload';
|
||||||
|
|
||||||
@@ -159,7 +164,7 @@ async function beforeUpload(file: File) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { maxSize, accept } = props;
|
const { maxSize, accept } = props;
|
||||||
const isAct = checkImgType(file, accept);
|
const isAct = isImage(file.name, accept);
|
||||||
if (!isAct) {
|
if (!isAct) {
|
||||||
message.error($t('ui.upload.acceptUpload', [accept]));
|
message.error($t('ui.upload.acceptUpload', [accept]));
|
||||||
isActMsg.value = false;
|
isActMsg.value = false;
|
||||||
|
|||||||
@@ -6,15 +6,3 @@ export function checkFileType(file: File, accepts: string[]) {
|
|||||||
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
||||||
return reg.test(file.name);
|
return reg.test(file.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 默认图片类型
|
|
||||||
*/
|
|
||||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
|
||||||
|
|
||||||
export function checkImgType(
|
|
||||||
file: File,
|
|
||||||
accepts: string[] = defaultImageAccepts,
|
|
||||||
) {
|
|
||||||
return checkFileType(file, accepts);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -15,11 +15,16 @@ import { ref, toRefs, watch } from 'vue';
|
|||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
import { IconifyIcon } from '@vben/icons';
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
import { isFunction, isObject, isString } from '@vben/utils';
|
import {
|
||||||
|
defaultImageAccepts,
|
||||||
|
isFunction,
|
||||||
|
isImage,
|
||||||
|
isObject,
|
||||||
|
isString,
|
||||||
|
} from '@vben/utils';
|
||||||
|
|
||||||
import { ElMessage, ElUpload } from 'element-plus';
|
import { ElMessage, ElUpload } from 'element-plus';
|
||||||
|
|
||||||
import { checkImgType, defaultImageAccepts } from './helper';
|
|
||||||
import { UploadResultStatus } from './typing';
|
import { UploadResultStatus } from './typing';
|
||||||
import { useUpload, useUploadType } from './use-upload';
|
import { useUpload, useUploadType } from './use-upload';
|
||||||
|
|
||||||
@@ -173,7 +178,7 @@ const handleRemove = async (file: UploadFile) => {
|
|||||||
|
|
||||||
const beforeUpload = async (file: File) => {
|
const beforeUpload = async (file: File) => {
|
||||||
const { maxSize, accept } = props;
|
const { maxSize, accept } = props;
|
||||||
const isAct = checkImgType(file, accept);
|
const isAct = isImage(file.name, accept);
|
||||||
if (!isAct) {
|
if (!isAct) {
|
||||||
ElMessage.error($t('ui.upload.acceptUpload', [accept]));
|
ElMessage.error($t('ui.upload.acceptUpload', [accept]));
|
||||||
isActMsg.value = false;
|
isActMsg.value = false;
|
||||||
|
|||||||
@@ -1,8 +1,3 @@
|
|||||||
/**
|
|
||||||
* 默认图片类型
|
|
||||||
*/
|
|
||||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
|
||||||
|
|
||||||
export function checkFileType(file: File, accepts: string[]) {
|
export function checkFileType(file: File, accepts: string[]) {
|
||||||
if (!accepts || accepts.length === 0) {
|
if (!accepts || accepts.length === 0) {
|
||||||
return true;
|
return true;
|
||||||
@@ -11,10 +6,3 @@ export function checkFileType(file: File, accepts: string[]) {
|
|||||||
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
||||||
return reg.test(file.name);
|
return reg.test(file.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function checkImgType(
|
|
||||||
file: File,
|
|
||||||
accepts: string[] = defaultImageAccepts,
|
|
||||||
) {
|
|
||||||
return checkFileType(file, accepts);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -9,11 +9,16 @@ import { computed, ref, toRefs, watch } from 'vue';
|
|||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
import { IconifyIcon } from '@vben/icons';
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
import { isFunction, isObject, isString } from '@vben/utils';
|
import {
|
||||||
|
defaultImageAccepts,
|
||||||
|
isFunction,
|
||||||
|
isImage,
|
||||||
|
isObject,
|
||||||
|
isString,
|
||||||
|
} from '@vben/utils';
|
||||||
|
|
||||||
import { NImage, NImageGroup, NModal, NUpload, useMessage } from 'naive-ui';
|
import { NImage, NImageGroup, NModal, NUpload, useMessage } from 'naive-ui';
|
||||||
|
|
||||||
import { checkImgType, defaultImageAccepts } from './helper';
|
|
||||||
import { useUpload, useUploadType } from './use-upload';
|
import { useUpload, useUploadType } from './use-upload';
|
||||||
|
|
||||||
defineOptions({ name: 'ImageUpload', inheritAttrs: false });
|
defineOptions({ name: 'ImageUpload', inheritAttrs: false });
|
||||||
@@ -152,7 +157,7 @@ function beforeUpload(options: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { maxSize, accept } = props;
|
const { maxSize, accept } = props;
|
||||||
const isAct = checkImgType(file, accept);
|
const isAct = isImage(file.name, accept);
|
||||||
if (!isAct) {
|
if (!isAct) {
|
||||||
message.error($t('ui.upload.acceptUpload', [accept]));
|
message.error($t('ui.upload.acceptUpload', [accept]));
|
||||||
isActMsg.value = false;
|
isActMsg.value = false;
|
||||||
|
|||||||
@@ -1,8 +1,3 @@
|
|||||||
/**
|
|
||||||
* 默认图片类型
|
|
||||||
*/
|
|
||||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
|
||||||
|
|
||||||
export function checkFileType(file: File, accepts: string[]) {
|
export function checkFileType(file: File, accepts: string[]) {
|
||||||
if (!accepts || accepts.length === 0) {
|
if (!accepts || accepts.length === 0) {
|
||||||
return true;
|
return true;
|
||||||
@@ -11,10 +6,3 @@ export function checkFileType(file: File, accepts: string[]) {
|
|||||||
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
||||||
return reg.test(file.name);
|
return reg.test(file.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function checkImgType(
|
|
||||||
file: File,
|
|
||||||
accepts: string[] = defaultImageAccepts,
|
|
||||||
) {
|
|
||||||
return checkFileType(file, accepts);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -9,13 +9,19 @@ import { computed, ref, toRefs, watch } from 'vue';
|
|||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
import { IconifyIcon } from '@vben/icons';
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
import { isFunction, isNumber, isObject, isString } from '@vben/utils';
|
import {
|
||||||
|
defaultImageAccepts,
|
||||||
|
isFunction,
|
||||||
|
isImage,
|
||||||
|
isNumber,
|
||||||
|
isObject,
|
||||||
|
isString,
|
||||||
|
} from '@vben/utils';
|
||||||
|
|
||||||
import { Dialog, Upload } from 'tdesign-vue-next';
|
import { Dialog, Upload } from 'tdesign-vue-next';
|
||||||
|
|
||||||
import { message } from '#/adapter/tdesign';
|
import { message } from '#/adapter/tdesign';
|
||||||
|
|
||||||
import { checkImgType, defaultImageAccepts } from './helper';
|
|
||||||
import { UploadResultStatus } from './typing';
|
import { UploadResultStatus } from './typing';
|
||||||
import { useUpload, useUploadType } from './use-upload';
|
import { useUpload, useUploadType } from './use-upload';
|
||||||
|
|
||||||
@@ -164,7 +170,7 @@ async function beforeUpload(file: UploadFile) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { maxSize, accept } = props;
|
const { maxSize, accept } = props;
|
||||||
const isAct = checkImgType(file.raw!, accept);
|
const isAct = isImage(file.raw!.name, accept);
|
||||||
if (!isAct) {
|
if (!isAct) {
|
||||||
message.error($t('ui.upload.acceptUpload', [accept]));
|
message.error($t('ui.upload.acceptUpload', [accept]));
|
||||||
isActMsg.value = false;
|
isActMsg.value = false;
|
||||||
|
|||||||
@@ -90,18 +90,34 @@ export function getFileNameFromUrl(url: null | string | undefined): string {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 默认图片类型
|
||||||
|
*/
|
||||||
|
export const defaultImageAccepts = [
|
||||||
|
'bmp',
|
||||||
|
'gif',
|
||||||
|
'jpeg',
|
||||||
|
'jpg',
|
||||||
|
'png',
|
||||||
|
'svg',
|
||||||
|
'webp',
|
||||||
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 判断文件是否为图片
|
* 判断文件是否为图片
|
||||||
*
|
*
|
||||||
* @param filename 文件名
|
* @param filename 文件名
|
||||||
* @returns 是否为图片
|
* @returns 是否为图片
|
||||||
*/
|
*/
|
||||||
export function isImage(filename: null | string | undefined): boolean {
|
export function isImage(
|
||||||
if (!filename) {
|
filename: null | string | undefined,
|
||||||
|
accepts: string[] = defaultImageAccepts,
|
||||||
|
): boolean {
|
||||||
|
if (!filename || accepts.length === 0) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
const ext = filename.split('.').pop()?.toLowerCase() || '';
|
const ext = filename.split('.').pop()?.toLowerCase() || '';
|
||||||
return ['bmp', 'gif', 'jpeg', 'jpg', 'png', 'svg', 'webp'].includes(ext);
|
return accepts.includes(ext);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user