File 文件

常用于上传文件的场景。

注意

m-file 可独立使用，在 m-form/m-table 中可使用时，需配置 prop 字段。

组件功能展示

基础使用

可上传 png,jpeg 类型文件不可上传 jpg 类型文件

baidu.png

下载

Display

baidu.png

下载

<template>
  <pa-title :padding="['bottom']">基础使用</pa-title>
  <pa-file
    v-model="value1"
    :fileIncludeType="['png', 'jpeg']"
    :fileExcludeType="['jpg']"
    :exData="exData"
    :contrastData="value2"
    :downloadTemplate="
      () => {
        M_Message.success('下载模版');
      }
    "
  ></pa-file>

  <pa-title :padding="['bottom']">Display</pa-title>
  <pa-file v-model="value1" :exData="exData" :contrastData="value2" display></pa-file>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { M_Message } from "@/package/components/feedback";

const exData = ref({
  FileTypeCode: "WorkflowApprovalFile"
});
const value1 = ref([
  {
    FileId: "0000001",
    FileName: "baidu.png",
    FileUrl: "//www.baidu.com/img/flexible/logo/pc/result@2.png",
    FullPath: "//www.baidu.com/img/flexible/logo/pc/result@2.png",
    OriginalName: "baidu.png"
  }
]);

const value2 = ref([
  {
    FileId: "000002",
    FileName: "baidu.png",
    FullPath: "//www.baidu.com/img/flexible/logo/pc/result@2.png",
    OriginalName: "baidu.png"
  }
]);
</script>

<style></style>

显示代码

SaFileType

字段	描述	类型	默认值
modelValue	绑定值	Array<SaFileDataType>	—
attachedData	文件上传额外参数/数据	object	—
placeholder	输入框提示	Record<"en-US" | "zh-CN", string> string	—
disabled	禁用状态	boolean	—
fileMultiple	上传文件数量限制	number	—
display	纯展示	boolean	—
fileIncludeType	文件类型限制 包含	Array<string>	—
fileExcludeType	文件类型限制 不包含	Array<string>	—
fileSingleSize	文件类型限制 单文件大小	number	—
fileAllSize	文件类型限制 单次总包文件大小	number	—
downloadTemplate	下载模板按钮执行方法	() => void;	—
contrastData	对比用原数据	Array<SaFileDataType>	—
alwaysContrast	是否总是显示对不数据	boolean	false

SaFileEvents

字段	描述	类型
change	当值改变时触发	function

SaFileDataType

字段	描述	类型	默认值
FileId	文件 ID	string	—
FullPath	完整路径	string number	—
FileName	文件名	string	undefined
FileUrl	文件相对路径	string	undefined
OriginalName	相对文件名	string	undefined