Smart-filer-vue NPM

smart-filer-vue

参数说明

gateway: 网关，必填，取环境变量

maxSize: 限制文件大小，兆，默认5M

uploadTimeout: 上传超时时间，毫秒，默认20000ms

actions: 操作选项，默认拍照、相册，若只有一个选项（PC端建议只传入“相册”模式），则不弹出ActionSheet
    [
      { actionType: "scanning", actionLabel: "OCR识别" },
      { actionType: "carame", actionLabel: "拍照" },
      { actionType: "album", actionLabel: "相册" }
    ]

isPreview: 是否需要预览图片，默认是

onlyPreview: 是否只需要预览功能，默认否

accepts: 允许的文件格式（次属性对“OCR识别”、“拍照”无效），默认所有

filterData: 查询、关联文件上下文
    {
      catalog: "PO",
      processId: "9c3d396e-9381-490a-bac5-92cee7cb6426"
    }

bucketAlias: OSS桶名，默认"SmartEvent"

isQuery: 是否需要初始化查询

isMapping: 是否需要关联文件

showFileName: 是否显示文件名称，默认true

h5FilePreview: 移动端是否可预览除图片外的文件，默认true

startUploadCallback: 开始上传回调

uploadCallback: 上传成功回调

deleteCallback: 删除文件回调

fileArray: 文件列表

params: 特殊业务需求下，回调需告知调用方自定义参数，会在uploadCallback回调方法第二个参数位置返回
    uploadCallback(listData, params)

使用

import { FinderFrame, UploadFilesList } from "smart-filter-vue";
import "smart-filter-vue/lib/index.css";

宫格模式

<FinderFrame
  :gateway="'https://gateway-dev.xxxxxxxx.cn'"
  :actions="actionList3"
  :isPreview="true"
  :accepts="''"
  :filterData="filterData"
  :isMapping="true"
  @startUploadCallback="startUploadCallback"
  @uploadCallback="uploadCallback"
/>

列表模式

<UploadFilesList
  :gateway="'https://gateway-dev.xxxxxxxx.cn'"
  :actions="actionList3"
  :isPreview="true"
  :accepts="''"
  :filterData="filterData"
  :isMapping="true"
  @startUploadCallback="startUploadCallback"
  @uploadCallback="uploadCallback"
/>

自定义插槽(以宫格模式为例)

<FinderFrame
  :gateway="'https://gateway-dev.xxxxxxxx.cn'"
  :actions="actionList"
  :isPreview="false"
  :accepts="'image/*'"
  :filterData="filterData"
  :isMapping="false"
  @uploadCallback="uploadCallback"
>
  <div name="action">点击上传</div>
</FinderFrame>