HaierUI Plus

Appearance

Return to top
On this page

FileBatchUpload 多文件上传（齐思博）

多文件上传组件。

基础用法

支持上传文件、预览文件、点击文件名下载文件、删除文件，以及禁用状态下不可删除文件等。

自动上传

上传规则

1.文件格式为excel、word、pdf

2.文件大小最大不超过5M

下载《场景测试要求及报告模版》
预览
自定义上传文件

上传规则

1.文件格式为excel、word、pdf

2.文件大小最大不超过5M

下载《场景测试要求及报告模版》
预览
<template>
  <div>
    <div style="margin: 20px 0 0 0;">自动上传</div>
    <h-file-batch-upload
      :uploadBtn="'默认上传文件'"
      :fileLists="fileList"
      :otherParams="otherParams"
      :disableBtn="disableBtn"
      :actionApi="apiUploadtestreport"
      :tipArr="tipArr" :tipInfo="tipInfo"
      :uploadValid="uploadValid"
      @fnuploadFile="fnAccepptFile"
      @fnDeleteFile="fnDeleteFile"
    ></h-file-batch-upload>
    <div style="margin: 20px 0;">自定义上传文件</div>
    <h-file-batch-upload
      :uploadBtn="'自定义上传文件'"
      :fileLists="fileList"
      actionApi="https://jsonplaceholder.typicode.com/posts/"
      :tipArr="tipArr"
      :tipInfo="tipInfo"
      :uploadValid="uploadValid"
      :http-request="fnUploadFile"
      @fnDeleteFile="fnDeleteFile"
    ></h-file-batch-upload>
  </div>
</template>
<script setup>
import {
  reactive,
  toRefs
} from 'vue';
const data = reactive({
  apiUploadtestreport: 'https://www.haigeek.com/developerportal/developer/sceneStore/uploadAttachment',
  fileList: [], //上传文件列表
  disableBtn: false,
  tipArr: [
    '文件格式为excel、word、pdf',
    '文件大小最大不超过5M'
  ],
  tipInfo: {
    url: 'https://resource.haigeek.com/ossdownload/resource/selfService/admin/%E6%A8%A1%E6%9D%BF%E5%9C%BA%E6%99%AF%E6%B5%8B%E8%AF%95%E8%A6%81%E6%B1%82%E5%8F%8A%E6%8A%A5%E5%91%8A%E6%A8%A1%E6%9D%BF_V1.2_20221207180610063.xlsx',
    title: '下载《场景测试要求及报告模版》'
  },
  uploadValid: {
    size: 5,
    fileFormat: 'xlsx、xls、pdf、doc、docx',
    isValidFileNameNoEmoji: true, //是否限制文件名中有表情或%
  },
  otherParams: { // 上传接口有其他参数
    uid: '111'
  }
})
const {
  apiUploadtestreport,
  fileList,
  disableBtn,
  tipArr,
  tipInfo,
  uploadValid,
  otherParams
} = toRefs(data)
const fnAccepptFile = (file) => {
  data.fileList.push(file)
}
const fnDeleteFile = (index) => {
  data.fileList.splice(index, 1);
}
const fnUploadFile = (file) => {
  data.fileList.push({
    name: file.file.name,
    url: '.' + file.file.name.slice(file.file.name.lastIndexOf('.') + 1),
    file: file.file
  });
}
</script>

Attributes（支持element-Upload上传所有配置）

参数说明类型可选值默认值
uploadBtn上传按钮名称string—上传文件
actionApi必选参数，上传的地址string—-
disableBtn是否禁用boolean—false
fileLists上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array—[]
returnUrl接口返回格式，默认返回res.data,如果返回res.data{url:'',name:'',则需传递'url'}string—res.data
tipInfo文件模版（可选）object—{title:'',url:''}
uploadValid上传文件大小格式校验object—{size:5,fileFormat:'xlsx、xls、pdf、doc、docx',isValidFileNameNoEmoji:true, //是否限制文件名中有表情或%}-
tipArr可上传文件格式以及大小提示语array—[]
otherParams上传时附带的额外参数object—{uid: 'aaa'}-

Events

方法名说明参数
fnuploadFile上传成功后的文件function(file)
fnDeleteFile删除上传的文件-