FileUpload 文件上传（孟瑞颖）

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

基础用法

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

<template>
  <div>
    <h-file-upload :uploadBtn="'上传文件'" :fileLists="fileList" :otherParams="otherParams" :disableBtn="disableBtn" :actionApi="apiUploadtestreport" :tipArr="tipArr" :tipInfo="tipInfo" :uploadValid="uploadValid" @fnuploadFile="fnAccepptFile" @fnDeleteFile="fnDeleteFile"></h-file-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 = file
    },
    fnDeleteFile() {
      this.fileList = []
    },
  }
}
</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	删除上传的文件	-