EleFormVideoUploader 视频上传组件

组件介绍

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

安装与引入

安装依赖

npm install diandi-ele-form-video-uploader

全局引入

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

import Vue from 'vue'
import EleFormVideoUploader from 'diandi-ele-form-video-uploader'

// 注册 video-uploader 组件
Vue.component('video-uploader', EleFormVideoUploader)

// 全局配置
Vue.use(EleForm, {
  // 可以在这里设置全局的 video-uploader 属性
  'video-uploader': {
    action: store.getters.elForm.uploadFile, // 上传地址
    responseFn(response, file, fileList) {
      //console.log('video up', response)
      return response.data.attachment
    }
  }
})

全局配置

// 全局 video-uploader 配置
'video-uploader': {
  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: {
        video: ''
      },
      formConfig: [
        {
          label: '视频',
          prop: 'video',
          type: 'video-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: {
        videos: []
      },
      formConfig: [
        {
          label: '视频',
          prop: 'videos',
          type: 'video-uploader',
          props: {
            limit: 3,
            multiple: true
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

属性配置

基础属性

属性类型描述默认值
actionString上传地址-
methodString上传方法'post'
multipleBoolean是否支持多选false
limitNumber上传数量限制-
fileSizeNumber文件大小限制（MB）-
acceptString接受的文件类型'video/*'
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('video up', response)
  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. 视频大小限制

原因：fileSize 配置过小或视频文件过大

解决方案：

  • 检查 fileSize 配置是否合理
  • 对于大视频文件，考虑使用分片上传
  • 调整服务器端的文件大小限制

示例代码

完整示例

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

<script>
export default {
  data() {
    return {
      formData: {
        video: '',
        videos: []
      },
      formConfig: [
        {
          label: '主视频',
          prop: 'video',
          type: 'video-uploader',
          required: true,
          props: {
            limit: 1,
            accept: 'video/mp4,video/avi,video/mov',
            tip: '请上传 MP4、AVI、MOV 格式的视频'
          }
        },
        {
          label: '视频集',
          prop: 'videos',
          type: 'video-uploader',
          props: {
            limit: 3,
            multiple: true,
            drag: true,
            tip: '请上传视频，最多 3 个文件',
            fileSize: 200, // 限制 200MB
            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: {
        videos: []
      },
      formConfig: [
        {
          label: '视频',
          prop: 'videos',
          type: 'video-uploader',
          props: {
            limit: 2,
            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>

总结

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

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

版本信息