From be0ff2991ec6fc31f8c7c698fda8679ace2ff13a Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Fri, 9 Sep 2022 15:04:20 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E4=BD=93=E7=A7=AF=E5=B1=95?= =?UTF-8?q?=E7=A4=BA,=E8=BD=AC=E6=88=90=20KB,=20MB=20=E7=AD=89=E5=B1=95?= =?UTF-8?q?=E7=A4=BA,=E8=80=8C=E4=B8=8D=E6=98=AF=E5=AD=97=E8=8A=82=20(#532?= =?UTF-8?q?8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 调整文件上传文件体积展示,转成 KB, MB 等展示,而不是字节 * 落改了一个 * 修复正则错误 * 修复正则错误 --- docs/zh-CN/components/form/input-file.md | 20 +++++++++++++ packages/amis-core/src/utils/formula.ts | 2 +- packages/amis-core/src/utils/prettyBytes.ts | 6 ++-- packages/amis-ui/src/locale/de-DE.ts | 3 +- packages/amis-ui/src/locale/en-US.ts | 4 +-- packages/amis-ui/src/locale/zh-CN.ts | 4 +-- .../amis/src/renderers/Form/InputFile.tsx | 22 +++++++------- .../amis/src/renderers/Form/InputImage.tsx | 29 +++++++------------ 8 files changed, 50 insertions(+), 40 deletions(-) diff --git a/docs/zh-CN/components/form/input-file.md b/docs/zh-CN/components/form/input-file.md index 9cbed2a51..9ce50b38b 100755 --- a/docs/zh-CN/components/form/input-file.md +++ b/docs/zh-CN/components/form/input-file.md @@ -72,6 +72,26 @@ order: 21 想要限制多个类型，则用逗号分隔，例如：`.csv,.md` +## 限制文件大小 + +可以配置`maxSize`来限制文件大小 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "body": [ + { + "type": "input-file", + "name": "file", + "label": "不能上传超过 1M 的文件", + "maxSize": 1048576, + "receiver": "/api/upload/file" + } + ] +} +``` + ## 手动上传 如果不希望 File 组件上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。 diff --git a/packages/amis-core/src/utils/formula.ts b/packages/amis-core/src/utils/formula.ts index 305033f35..396694b6c 100644 --- a/packages/amis-core/src/utils/formula.ts +++ b/packages/amis-core/src/utils/formula.ts @@ -170,7 +170,7 @@ export function formulaExec( const curValue = value.trim(); // 剔除前后空格 // OpenFormulaExecEvalMode 为 true 时，非 ${ xxx } 格式也会尝试使用表达式运算器 - if (OpenFormulaExecEvalMode && /^[0-9a-zA-z_]+$/.test(curValue)) { + if (OpenFormulaExecEvalMode && /^[0-9a-zA-Z_]+$/.test(curValue)) { // 普通字符串类型（非表达式），先试一下从上下文中获取数据 const curValueTemp = FormulaExec['var'](curValue, data); // 备注: 其他特殊格式，比如邮箱、日期 diff --git a/packages/amis-core/src/utils/prettyBytes.ts b/packages/amis-core/src/utils/prettyBytes.ts index c4f94750f..d25256165 100644 --- a/packages/amis-core/src/utils/prettyBytes.ts +++ b/packages/amis-core/src/utils/prettyBytes.ts @@ -1,6 +1,6 @@ const UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; -export const prettyBytes = (num: number) => { +export const prettyBytes = (num: number, step = 1000) => { if (!Number.isFinite(num)) { throw new TypeError(`Expected a finite number, got ${typeof num}: ${num}`); } @@ -16,10 +16,10 @@ export const prettyBytes = (num: number) => { } const exponent = Math.min( - Math.floor(Math.log(num) / Math.log(1000)), + Math.floor(Math.log(num) / Math.log(step)), UNITS.length - 1 ); - const numStr = Number((num / Math.pow(1000, exponent)).toPrecision(3)); + const numStr = Number((num / Math.pow(step, exponent)).toPrecision(3)); const unit = UNITS[exponent]; return (neg ? '-' : '') + numStr + ' ' + unit; diff --git a/packages/amis-ui/src/locale/de-DE.ts b/packages/amis-ui/src/locale/de-DE.ts index f0441c777..720ae4c27 100644 --- a/packages/amis-ui/src/locale/de-DE.ts +++ b/packages/amis-ui/src/locale/de-DE.ts @@ -130,12 +130,13 @@ register('de-DE', { 'File.failed': 'Fehlerhafte Dateien', 'File.invalidType': '{{files}} entspricht nicht Typ `{{accept}}`', 'File.maxSize': - '{{filename}} überschreitet die maximale Größe von {{maxsize}} (in Byte)', + '{{filename}} überschreitet die maximale Größe von {{maxSize}}', 'File.pause': 'Hochladen anhalten', 'File.repick': 'Erneut suswählen', 'File.result': 'Erfolgreich hochgeladene Dateien: {{uploaded}}, nicht hochgeladene Dateien: {{failed}}', 'File.retry': 'Wiederholen', + 'File.sizeLimit': 'Die maximale Dateigröße ist {{maxSize}}', 'File.start': 'Hochladen beginnen', 'File.upload': 'Hochladen', 'Image.upload': 'Hochladen', diff --git a/packages/amis-ui/src/locale/en-US.ts b/packages/amis-ui/src/locale/en-US.ts index cba89788c..bfc38c453 100644 --- a/packages/amis-ui/src/locale/en-US.ts +++ b/packages/amis-ui/src/locale/en-US.ts @@ -128,13 +128,13 @@ register('en-US', { 'File.invalidType': '{{files}} does not match type `{{accept}}`', 'File.maxLength': 'The maximum limit is {{maxLength}}', 'File.maxSize': - '{{filename}} you selected exceeds the maximum limit of {{maxsize}} (in bytes)', + '{{filename}} you selected exceeds the maximum limit of {{maxSize}}', 'File.pause': 'Pause uplaod', 'File.repick': 'Repick', 'File.result': 'Successfully uploaded {{uploaded}} files, failed to upload {{failed}} files', 'File.retry': 'Retry', - 'File.sizeLimit': 'The maximum file size is {{maxSize}} B', + 'File.sizeLimit': 'The maximum file size is {{maxSize}}', 'File.start': 'Start upload', 'File.upload': 'Upload', 'Image.upload': 'Upload image', diff --git a/packages/amis-ui/src/locale/zh-CN.ts b/packages/amis-ui/src/locale/zh-CN.ts index 2f5b432aa..6486f1c4e 100644 --- a/packages/amis-ui/src/locale/zh-CN.ts +++ b/packages/amis-ui/src/locale/zh-CN.ts @@ -133,12 +133,12 @@ register('zh-CN', { 'File.invalidType': '{{files}} 不符合类型的 {{accept}} 的设定，请仔细检查', 'File.maxLength': '最多上传 {{maxLength}} 个文件', 'File.maxSize': - '{{filename}} 大小为 {{actualSize}} 超出了最大为 {{maxSize}} （字节）的限制', + '{{filename}} 大小为 {{actualSize}} 超出了最大为 {{maxSize}} 的限制', 'File.pause': '暂停上传', 'File.repick': '重新选择', 'File.result': '已成功上传 {{uploaded}} 个文件，{{failed}} 个文件上传失败，', 'File.retry': '重试上传', - 'File.sizeLimit': '文件大小不超过 {{maxSize}} B', + 'File.sizeLimit': '文件大小不超过 {{maxSize}}', 'File.start': '开始上传', 'File.upload': '文件上传', 'Image.upload': '图片上传', diff --git a/packages/amis/src/renderers/Form/InputFile.tsx b/packages/amis/src/renderers/Form/InputFile.tsx index 75d263043..ddf5919b4 100644 --- a/packages/amis/src/renderers/Form/InputFile.tsx +++ b/packages/amis/src/renderers/Form/InputFile.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import {FormItem, FormControlProps, FormBaseControl} from 'amis-core'; +import {FormItem, FormControlProps, prettyBytes} from 'amis-core'; import find from 'lodash/find'; import isPlainObject from 'lodash/isPlainObject'; -import ImageControl from './InputImage'; import {Payload, ApiObject, ApiString, ActionObject} from 'amis-core'; import {qsstringify, createObject, guid, isEmpty} from 'amis-core'; import { @@ -21,8 +20,7 @@ import { FormBaseControlSchema, SchemaApi, SchemaClassName, - SchemaTokenizeableString, - SchemaUrlPath + SchemaTokenizeableString } from '../../Schema'; import merge from 'lodash/merge'; import omit from 'lodash/omit'; @@ -515,8 +513,8 @@ export default class FileControl extends React.Component { // this.props.env.alert( // __('File.maxSize', { // filename: file[nameField as keyof typeof file] || file.name, - // actualSize: ImageControl.formatFileSize(file.size), - // maxSize: ImageControl.formatFileSize(maxSize) + // actualSize: prettyBytes(file.size), + // maxSize: prettyBytes(maxSize) // }) // ); file.state = 'invalid'; @@ -1409,7 +1407,9 @@ export default class FileControl extends React.Component { {maxSize ? (
- {__('File.sizeLimit', {maxSize})} + {__('File.sizeLimit', { + maxSize: prettyBytes(maxSize, 1024) + })}
) : null} @@ -1456,7 +1456,7 @@ export default class FileControl extends React.Component { {maxSize && !drag ? (
- {__('File.sizeLimit', {maxSize})} + {__('File.sizeLimit', {maxSize: prettyBytes(maxSize, 1024)})}
) : null} @@ -1478,10 +1478,8 @@ export default class FileControl extends React.Component { (maxSize && file.size > maxSize ? __('File.maxSize', { filename: file.name, - actualSize: ImageControl.formatFileSize( - file.size - ), - maxSize: ImageControl.formatFileSize(maxSize) + actualSize: prettyBytes(file.size, 1024), + maxSize: prettyBytes(maxSize, 1024) }) : '') : '' diff --git a/packages/amis/src/renderers/Form/InputImage.tsx b/packages/amis/src/renderers/Form/InputImage.tsx index 3a4828b90..9c101ff9f 100644 --- a/packages/amis/src/renderers/Form/InputImage.tsx +++ b/packages/amis/src/renderers/Form/InputImage.tsx @@ -1,5 +1,10 @@ import React, {Suspense} from 'react'; -import {FormItem, FormControlProps, FormBaseControl} from 'amis-core'; +import { + FormItem, + FormControlProps, + FormBaseControl, + prettyBytes +} from 'amis-core'; // import 'cropperjs/dist/cropper.css'; const Cropper = React.lazy(() => import('react-cropper')); import DropZone from 'react-dropzone'; @@ -341,20 +346,6 @@ export default class ImageControl extends React.Component< dropCrop: true }; - static formatFileSize( - size: number | string, - units = [' B', ' KB', ' M', ' G'] - ) { - size = parseInt(size as string, 10) || 0; - - while (size > 1024 && units.length > 1) { - size /= 1024; - units.shift(); - } - - return size.toFixed(2) + units[0]; - } - static valueToFile( value: string | object, props?: ImageProps @@ -997,8 +988,8 @@ export default class ImageControl extends React.Component< this.props.env.alert( __('File.maxSize', { filename: file.name, - actualSize: ImageControl.formatFileSize(file.size), - maxSize: ImageControl.formatFileSize(maxSize) + actualSize: prettyBytes(file.size, 1024), + maxSize: prettyBytes(maxSize, 1024) }) ); return; @@ -1563,9 +1554,9 @@ export default class ImageControl extends React.Component< , file.info.len ? (
- {ImageControl.formatFileSize( + {prettyBytes( file.info.len - )} + , 1024)}
) : null ]