FileBatchUpload 文件上传（齐思博）

UI改版后的上传文件组件。

基础用法

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

<template>
  <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>
    <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>
export default {
  data() {
    return {
      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'
      }
    }
  },
  methods: {
    fnAccepptFile(file) {
      this.fileList.push(file)
    },
    fnUploadFile(file) {
			this.fileList.push({
				name: file.file.name,
				url: '.' + file.file.name.slice(file.file.name.lastIndexOf('.') + 1),
				file: file.file
			});
		},
    fnDeleteFile(index) {
      this.fileList.splice(index, 1);
    },
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
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: '111'}

Events

方法名	说明	参数
fnuploadFile	上传成功后的回调	function(file)
fnDeleteFile	点击删除按钮事件	文件下标