EleFormImageUploader 图片上传组件

组件介绍

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

安装与引入

安装依赖

npm install diandi-ele-form-image-uploader

全局引入

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

import Vue from 'vue'
import EleFormImageUploader from 'diandi-ele-form-image-uploader'

// 注册 image-uploader 组件
Vue.component('image-uploader', EleFormImageUploader)

// 全局配置
Vue.use(EleForm, {
  // 可以在这里设置全局的 image-uploader 属性
  'image-uploader': {
    action: store.getters.elForm.action, // 上传地址
    responseFn(response, file, fileList) {
      // 返回一个预览地址，一个相对地址
      return response.data.attachment
    }
  }
})

全局配置

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

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

基本使用

单张图片上传

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

<script>
export default {
  data() {
    return {
      formData: {
        avatar: ''
      },
      formConfig: [
        {
          label: '头像',
          prop: 'avatar',
          type: 'image-uploader',
          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: {
        images: []
      },
      formConfig: [
        {
          label: '相册',
          prop: 'images',
          type: 'image-uploader',
          props: {
            limit: 5,
            multiple: true
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

属性配置

基础属性

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

响应处理函数

responseFn(response, file, fileList) {
  // 返回一个预览地址，一个相对地址
  return response.data.attachment
}

参数说明：

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

返回值：

  • 字符串：返回图片的预览地址
  • 对象：包含 url 和 attachment 等属性的对象

事件

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

常见问题

1. 上传失败

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

解决方案：

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

2. 响应处理错误

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

解决方案：

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

3. 图片预览不显示

原因：返回的预览地址格式错误或服务器端未正确存储图片

解决方案：

  • 检查 responseFn 返回的地址格式是否正确
  • 确认服务器端是否正确存储图片并返回可访问的地址
  • 检查图片访问权限和路径配置

示例代码

完整示例

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

<script>
export default {
  data() {
    return {
      formData: {
        avatar: '',
        gallery: []
      },
      formConfig: [
        {
          label: '头像',
          prop: 'avatar',
          type: 'image-uploader',
          required: true,
          props: {
            limit: 1,
            tip: '请上传头像图片，尺寸建议 200x200px',
            listType: 'picture'
          }
        },
        {
          label: '相册',
          prop: 'gallery',
          type: 'image-uploader',
          props: {
            limit: 5,
            multiple: true,
            drag: true,
            tip: '请上传相册图片，最多 5 张',
            fileSize: 10, // 限制 10MB
            accept: 'image/jpeg,image/png,image/gif'
          }
        }
      ]
    }
  },
  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: {
        images: []
      },
      formConfig: [
        {
          label: '图片',
          prop: 'images',
          type: 'image-uploader',
          props: {
            limit: 3,
            multiple: true,
            responseFn: (response, file, fileList) => {
              // 自定义响应处理
              if (response.code === 200) {
                return {
                  url: response.data.url, // 预览地址
                  attachment: response.data.path // 存储路径
                }
              }
              throw new Error(response.message || '上传失败')
            }
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

总结

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

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

版本信息