EleFormUploadFile 文件上传组件

组件介绍

EleFormUploadFile 是一个基于 Element UI 封装的文件上传组件，用于在表单中快速实现文件上传功能。它支持单个和多个文件上传、文件预览、文件删除等功能。

安装与引入

安装依赖

npm install diandi-ele-form-upload-file

全局引入

在 src/projects/scrm/utils/el-form.js 中全局引入和配置：

import Vue from 'vue'
import EleFormUploadFile from 'diandi-ele-form-upload-file'

// 注册 upload-file 组件
Vue.component('upload-file', EleFormUploadFile)

// 全局配置
Vue.use(EleForm, {
  // 专门设置全局的 upload-file 属性
  'upload-file': {
    action: store.getters.elForm.uploadFile, // 上传地址
    responseFn(response, file, fileList) {
      console.log('城南擦肩可能会', fileList)
      return {
        name: file.name,
        attachment: response.data.attachment,
        url: response.data.url,
        size: file.size
      }
    }
  }
})

全局配置

// 全局 upload-file 配置
'upload-file': {
  action: String, // 上传地址
  responseFn: Function // 响应处理函数
}

// 上传配置
upload: {
  fileSize: Number, // 文件大小限制
  chunkSize: Number, // 分片尺寸（M）
  uploadFile: String, // 文件上传地址
  uploadMerge: String, // 分配合并地址
  headers: Object // 请求头
}

基本使用

单个文件上传

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        resume: ''
      },
      formConfig: [
        {
          label: '简历',
          prop: 'resume',
          type: 'upload-file',
          props: {
            limit: 1
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

多个文件上传

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        attachments: []
      },
      formConfig: [
        {
          label: '附件',
          prop: 'attachments',
          type: 'upload-file',
          props: {
            limit: 5,
            multiple: true
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

属性配置

基础属性

属性类型描述默认值
actionString上传地址-
methodString上传方法'post'
multipleBoolean是否支持多选false
limitNumber上传数量限制-
fileSizeNumber文件大小限制（MB）-
acceptString接受的文件类型'*'
headersObject请求头{}
dataObject上传额外参数{}
withCredentialsBoolean是否携带凭证false
showFileListBoolean是否显示文件列表true
dragBoolean是否支持拖拽上传false
listTypeString文件列表类型'text'
autoUploadBoolean是否自动上传true
onRemoveFunction文件移除前的钩子-
onPreviewFunction点击文件列表中已上传文件时的钩子-
onSuccessFunction文件上传成功时的钩子-
onErrorFunction文件上传失败时的钩子-
onProgressFunction文件上传时的钩子-
onExceedFunction文件超出限制时的钩子-
beforeUploadFunction上传文件之前的钩子-
responseFnFunction响应处理函数-
disabledBoolean是否禁用false
placeholderString占位符文本-
tipString提示文本-
listStyleObject列表样式{}
uploadStyleObject上传区域样式{}

响应处理函数

responseFn(response, file, fileList) {
  console.log('城南擦肩可能会', fileList)
  return {
    name: file.name,
    attachment: response.data.attachment,
    url: response.data.url,
    size: file.size
  }
}

参数说明：

  • response：服务器返回的响应数据
  • file：当前上传的文件对象
  • fileList：文件列表

返回值：

  • 对象：包含以下属性的对象
    • name：文件名
    • attachment：文件存储路径
    • url：文件预览地址
    • size：文件大小

事件

事件名称回调参数描述
changefileList文件列表变化时触发
successresponse, file, fileList文件上传成功时触发
errorerror, file, fileList文件上传失败时触发
progressevent, file, fileList文件上传进度变化时触发
removefile, fileList文件移除时触发
previewfile文件预览时触发
exceedfile, fileList文件超出限制时触发

常见问题

1. 上传失败

原因：上传地址配置错误或服务器端问题

解决方案：

  • 检查 action 配置是否正确
  • 确认服务器端是否正常接收上传请求
  • 检查网络连接和跨域配置

2. 响应处理错误

原因：responseFn 配置错误或服务器返回格式不匹配

解决方案：

  • 检查 responseFn 函数是否正确处理服务器返回的数据
  • 确认服务器返回的数据格式是否包含 data.attachment 和 data.url 字段
  • 调整 responseFn 函数以适应服务器返回的数据格式

3. 文件类型限制

原因：accept 配置错误或文件类型不匹配

解决方案：

  • 检查 accept 配置是否正确
  • 对于特定文件类型，设置相应的 MIME 类型
  • 对于多种文件类型，使用逗号分隔

示例代码

完整示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    :label-width="'120px'"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        resume: '',
        attachments: []
      },
      formConfig: [
        {
          label: '简历',
          prop: 'resume',
          type: 'upload-file',
          required: true,
          props: {
            limit: 1,
            accept: '.pdf,.doc,.docx',
            tip: '请上传 PDF、Word 格式的简历'
          }
        },
        {
          label: '附件',
          prop: 'attachments',
          type: 'upload-file',
          props: {
            limit: 5,
            multiple: true,
            drag: true,
            tip: '请上传附件，最多 5 个文件',
            fileSize: 50, // 限制 50MB
            listType: 'text'
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
      // 这里可以进行API调用等操作
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

自定义响应处理

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        files: []
      },
      formConfig: [
        {
          label: '文件',
          prop: 'files',
          type: 'upload-file',
          props: {
            limit: 3,
            multiple: true,
            responseFn: (response, file, fileList) => {
              // 自定义响应处理
              if (response.code === 200) {
                return {
                  name: file.name,
                  attachment: response.data.path,
                  url: response.data.url,
                  size: file.size
                }
              }
              throw new Error(response.message || '上传失败')
            }
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

总结

EleFormUploadFile 是一个功能强大的文件上传组件，通过简单的配置即可快速实现在表单中的文件上传功能。它支持多种上传模式和配置选项，可以满足不同场景下的文件上传需求。

通过全局配置和组件级配置的结合，可以灵活应对各种文件上传场景，大大提高了开发效率。

版本信息