B端大仓文档

FileInput

基于FUpload封装的文件上传组件。

沉淀通用文件上传API及行为
可与AdvancedForm契合，简化表单数据管理
支持自定义FetchAPI
后续
- 可根据服务端需求扩展大文件分片上传，断点续传等常用功能。
- 待后续导入行为统一后，可基于此进一步封装业务组件。

业务场景

多与AdvancedForm结合使用，用于表单提交及回显(回显方案待梳理)

如何使用

vue

<script setup lang="ts">
import { ref } from 'vue'
import { FileInput } from '@fs/fui'

const files = ref('')
</script>

<template>
  <FileInput v-model:value="files" :maxSize="1024" />
</template>

代码演示

基本使用

v-model:value =

<script setup lang="ts">
import { ref } from 'vue'

const files = ref('')
</script>

<template>
  v-model:value = {{ files }}

  <FileInput v-model:value="files" :maxSize="1024" />
</template>

不同展示类型

默认text，支持点击与拖拽，表单提交默认场景频率最高
按现有UI规范，扩展base类型
关于picture|picture-card属于特定场景仅可上传图片资源

listType:

base

text

picture

picture-card

files:

<script setup lang="ts">
import { ref } from 'vue'
import { FileInputListType } from '@fs/lib'

const files = ref('')
const value = ref('text')
</script>

<template>
  listType:
  <f-radio-group v-model:value="value">
    <f-radio :value="FileInputListType.base">
      {{ FileInputListType.base }}
    </f-radio>
    <f-radio :value="FileInputListType.text">
      {{ FileInputListType.text }}
    </f-radio>
    <f-radio :value="FileInputListType.picture">
      {{ FileInputListType.picture }}
    </f-radio>
    <f-radio :value="FileInputListType.pictureCard">
      {{ FileInputListType.pictureCard }}
    </f-radio>
  </f-radio-group>

  <br />
  <br />

  files: {{ files }}
  <br />
  <br />

  <FileInput v-model:value="files" :listType="value" acceptFile="Picture" />
</template>

不同文件类型

默认按MapFileSuffix分组归类，如Word可上传['.doc', '.docx', '.wps']
也支持指定文件类型如acceptFile='.docx'，以及组合式如acceptFile='Word,.png'

<script setup lang="ts">
import { ref } from 'vue'
import { MapFileSuffix } from '@fs/lib'

const files = ref('')
const value = ref('')
</script>

<template>
  acceptFile:
  <f-radio-group v-model:value="value">
    <f-radio :value="item.label" v-for="item in MapFileSuffix">
      {{ item.label }}
    </f-radio>
  </f-radio-group>

  <br />
  <br />

  files: {{ files }}
  <br />
  <br />

  <FileInput v-model:value="files" :acceptFile="value" />
</template>

限定文件大小(单位kb)，限定上传数量

限制10kb, 限制2个

<script setup lang="ts">
import { ref } from 'vue'

const files = ref('')
</script>

<template>
  限制10kb, 限制2个<br /><br />
  <FileInput
    v-model:value="files"
    acceptFile=".png"
    :maxSize="10"
    :maxCount="2"
  />
</template>

根据s3Key反显(简化编辑处理)

<script setup lang="ts">
import { ref } from 'vue'

const files = ref(
  'b77aa3de4f414684bad4f0d4e090e1b2,337d683879ca4ced986b106bad6a1349'
)
</script>

<template>
  <FileInput v-model:value="files" acceptFile=".png" />
</template>

以上业务侧默认走s3，但是必然会有自定义上传的场景，如常见的导入，考虑解析完就删除，不走文件中心，需要接具体业务的~

默认走s3自动上传，也可以自定义上传，且可自由控制自动上传or手动上传

v-model:value = []

<script setup lang="ts">
import { ref } from 'vue'

const files = ref([])

const checked = ref(true)

const onChange = (file: any) => {
  console.log('++++', file)
}
const handleUpload = () => {
  console.log('++++', files.value)
}
</script>

<template>
  v-model:value = {{ files }}
  <FileInput
    v-model:value="files"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    acceptFile="Excel"
    :autoUpload="checked"
    @change="onChange"
  />

  <br />
  <f-row justify="end">
    <f-space>
      <f-switch
        v-model:checked="checked"
        checked-children="自动上传"
        un-checked-children="手动上传"
      />
      <f-button
        v-show="!checked"
        type="primary"
        :disabled="!files.length"
        @click="handleUpload"
      >
        上传
      </f-button>
    </f-space>
  </f-row>
</template>

API

由于此组件基于FUpload，以下仅针对特殊API定义加以说明

参数	说明	类型	默认值	版本
value(v-model:value)	数据	`IFileValue`	-	-
valueType	为简化s3具体业务场景	`FileValueType`	`FileValueType.str`	-
action	上传地址	`string\|null`	`S3.action`	-
acceptFile	接受上传的文件类型	`string`	-	-

详细说明

valueType
基于S3考虑与后端交互时多以字符串传递，即key值(大部分场景后端落库也是此值)，所以前端传入和后端返回时都为字符串，简单理解为Input组件的字符串传输，落库string，CRUD整个环节都是string。
当然上述是理想情况，CRUD整个环节前后端都无需处理数据(此组件内部处理)。
若非标准S3业务，处理CRUD环节可自行按IFileValue+FileValueType处理数据，保持对应。

acceptFile

组件内置分组，见MapFileSuffix

值	允许上传类型
Word	['.doc', '.docx', '.wps']
Excel	['.xls', '.xlsx', '.csv', '.xlsm']
PPT	['.ppt', '.pptx']
PDF	['.pdf']
Picture	['.png', '.jpeg', '.jpg', '.bmp', '.gif', '.webp', '.svg']
Audio	['.mp3', '.wma', '.wav', '.amr']
Video	['.mp4', '.avi', '.mov', '.mkv']
ZIP	['.zip', '.rar', '.7z', '.tar', '.gz', '.tgz']

上述若不满足业务，可自行传入acceptFile，自由组合规律如下：

值	允许上传类型
`Word,Excel`	['.doc', '.docx', '.wps', '.xls', '.xlsx', '.csv', '.xlsm']
`Word,.png`	['.doc', '.docx', '.wps', '.png']
`.png`	['.png']
`.png,.pdf`	['.png', '.pdf']

export type IFileValue = string | string[] | FileModel | FileModel[]

// 业务场景简化
export enum FileValueType {
  str = 'string',
  strArr = 'string[]',
  obj = 'object',
  objArr = 'object[]',
}

FileInput ​

业务场景 ​

如何使用 ​

代码演示 ​

API ​

详细说明 ​

FileInput

业务场景

如何使用

代码演示

API

详细说明