封装el-upload组件，用于上传图片和视频的组件

勿语&

已于 2024-10-08 20:46:34 修改

阅读量1.7k

点赞数 18

分类专栏： Vue3+Element Plus 封装组件文章标签：音视频 vue.js 前端

于 2024-10-05 17:05:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_58706693/article/details/142714572

版权

Vue3+Element Plus 封装组件专栏收录该内容

3 篇文章

订阅专栏

使用环境 vue3+element plus
需要根据后端返回结构修改的函数：onPreview onRemove onSuccess

组件使用

基本使用

在这里插入图片描述
源代码：

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
function change(urls){
  console.log(urls)
}
</script>

<template>
  <AutoUploadFile @change="change"/>
</template>

<style lang="scss" scoped>
</style>

初始文件列表回显

在这里插入图片描述
源代码：

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
import {ref} from "vue";

const initUrls = ref([
  'http://127.0.0.1:9090/file/local-plus/6700f235df13a72064bf9167.png'
])

function change(urls) {
  console.log(urls)
}
</script>

<template>
  <AutoUploadFile :init-file-urls="initUrls" accept=".jpg,.jpeg,.png" @change="change">
  </AutoUploadFile>
</template>

<style lang="scss" scoped>
</style>

定义上传格式

如果有mp4类型，文件展示列表就会变为text

在这里插入图片描述
源代码：

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
function change(urls){
  console.log(urls)
}
</script>

<template>
  <AutoUploadFile accept=".jpg,.jpeg,.png,.mp4" :max-size="100" @change="change"/>
</template>

<style lang="scss" scoped>
</style>

自定义上传按钮样式

在这里插入图片描述
源代码：

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
function change(urls){
  console.log(urls)
}
</script>

<template>
  <AutoUploadFile accept=".jpg,.jpeg,.png,.mp4" :max-size="100" @change="change">
    <el-button>自定义上传样式</el-button>
  </AutoUploadFile>
</template>

<style lang="scss" scoped>
</style>

组件属性

属性名	属性类型	默认值	是否必填	说明
initFileUrls	Array	[]	否	用于上传列表的回显，接收外部初始化url数组
listType	String	picture-card	否	上传列表展示格式。可选项：picture-card/picture/text ，但是如果accept允许mp4，那么listType就会自动转化为text
action	String	#	是	上传文件时的接口服务
headers	Object	{}	否	请求头
name	String	file	否	提交文件时的字段名
withCredentials	Boolean	true	否	是否支持cookie凭证信息
showFileList	Boolean	true	否	是否展示上传列表
accept	String	“.jpg,.jpeg,.png”	否	可以上传的文件类型
limit	Number	5	否	允许上传的最大文件数量
maxSize	Number	5	否	最大文件大小，单位MB
tipPrefix	String	“”	否	提示信息前缀
showTip	Boolean	true	否	是否展示提示信息
showOverflowTooltip	Boolean	true	否	tip过长是否使用省略号显示
multiple	Boolean	true	否	可以多选文件
autoUpload	Boolean	true	否	默认自动上传
size	String	100px	否	picture-card的尺寸大小

组件事件

事件名	事件参数列表	说明
onProgress	(e,file,fileList)	用于监控文件上传进度
change	(urls)	上传列表改变时的回调

组件暴露方法

方法名	参数列表	说明
clearFiles	()	清空文件列表
submit	()	用于手动提交

组件插槽

插槽名	插槽回显参数	说明
default	无	上传文件时的点击区域，用于自定义样式
file	{ file }	文件列表样式，用于自定义缩略图
trigger	无	用于手动提交，只选择文件，不发起提交请求的插槽

组件源码：（auto-upload-file.vue）

<!--需要根据后端返回结构修改的函数：onPreview onRemove onSuccess -->
<script setup>
import {computed, onMounted, onUpdated, ref} from "vue";
import {ElMessage} from "element-plus";

const prop = defineProps({
  // 文件列表
  initFileUrls: {
    type: Array,
    default: []
  },
  // 展示格式
  listType: {
    type: String,
    default: 'picture-card'
  },
  // 上传文件的默认接口
  action: {
    type: String,
    default: 'http://localhost:9090/upload/file'
  },
  // 请求头（添加token等）
  headers: {
    type: Object,
    default: {}
  },
  // 上传时的文件名（需要与后端接收时的字段保持一致）
  name: {
    type: String,
    default: 'file'
  },
  // 默认支持cookie凭证信息
  withCredentials: {
    type: Boolean,
    default: true
  },
  // 默认展示上传文件列表
  showFileList: {
    type: Boolean,
    default: true
  },
  // 可接受文件的类型
  accept: {
    type: String,
    default: '.jpg,.jpeg,.png'
  },
  // 允许上传的最大文件数量
  limit: {
    type: Number,
    default: 5
  },
  // 单位MB
  maxSize: {
    type: Number,
    default: 5
  },
  // 提示前缀
  tipPrefix: {
    type: String,
    default: ''
  },
  // 是否展示提示
  showTip: {
    type: Boolean,
    default: true
  },
  // tip过长使用省略号显示
  showOverflowTooltip: {
    type: Boolean,
    default: true
  },
  // 可以多选文件
  multiple: {
    type: Boolean,
    default: true
  },
  // 默认自动上传
  autoUpload: {
    type: Boolean,
    default: true
  },
  // picture-card尺寸大小
  size: {
    type: String,
    default: '6.25rem'
  }
})

const emit = defineEmits(['onProgress', 'change'])
defineExpose({
  clearFiles,
  submit
})

// el-upload使用的文件列表
const fileList = ref(prop.initFileUrls.map(item => {
  return {
    name: getFileName(item),
    url: item
  }
}))

const uploadRef = ref()

// 存放后端返回的url，及初始化url
const urls = ref([...prop.initFileUrls])

// 如果允许上传视频，则默认只能使用text显示上传列表
const listTypeCmp = computed(() => {
  return prop.accept.indexOf('mp4') !== -1 ? 'text' : prop.listType
})

// 提示信息
const tip = computed(() => {
  return `${prop.tipPrefix ? prop.tipPrefix + '，' : ''}文件类型：
  ${prop.accept.replaceAll(',', '/').replaceAll('.', '')}
  ，文件大小不能超过：${prop.maxSize}MB`
})

// 文件上传之前的钩子
function beforeUpload(e) {
  const MB = e.size / (1024 * 1024)
  if (MB > prop.maxSize) {
    ElMessage.error(`文件的大小不能超过:${prop.maxSize}MB`)
    return false
  }
}

// 上传成功的回调(根据后端返回值不同需要略作修改)
function onSuccess(e, file) {
  urls.value.push(e)
  emit('change', urls.value)
}

const dialogFileUrl = ref()
const dialogVisible = ref(false)

// 预览图片(根据后端返回值不同需要略作修改)
function onPreview(e) {
  dialogFileUrl.value = e.response || e.url
  dialogVisible.value = true
}

// 移除文件(根据后端返回值不同需要略作修改)
function onRemove(e) {
  urls.value = urls.value.filter(item => item !== (e.response || e.url))
  emit('change', urls.value)
}

// 超出最大文件限制时，执行的钩子函数
function onExceed(e) {
  ElMessage.error(`超出要求的文件最大数量:${prop.limit}`)
}

// 文件上传失败时的回调
function onError() {
  ElMessage.error('文件上传失败')
}

// 上传进度回调
function onProgress(e, file, fileList) {
  emit('onProgress', e, file, fileList)
}

// 清空文件列表
function clearFiles() {
  uploadRef.value.clearFiles()
  urls.value = []
  emit('change', urls.value)
}

// 手动提交
function submit() {
  uploadRef.value.submit()
}

// 获取后缀
function getSuffix(url) {
  return url.substring(url.lastIndexOf('.') + 1)
}

// 获取文件名
function getFileName(url) {
  return url.substring(url.lastIndexOf('/') + 1)
}

// 阻止点击tip时触发的上传行为
function preventClick(event) {
  event.stopPropagation()
}

// 初始化picture-card大小
function initSize() {
  const uploadListItem = document.querySelector('.el-upload-list--picture-card')
  const uploadPictureCard = document.querySelector('.el-upload--picture-card')
  if (uploadListItem) {
    uploadListItem.style.setProperty('--el-upload-list-picture-card-size', prop.size)
  }
  if (uploadPictureCard) {
    uploadPictureCard.style.setProperty('--el-upload-picture-card-size', prop.size)
    if (listTypeCmp.value==='picture-card'){
      uploadPictureCard.style['margin-bottom']='1.56rem'
    }
  }
}

// 动态处理展示样式
function handleStyle() {
  initSize()
}

onUpdated(() => {
  handleStyle()
})
onMounted(() => {
  handleStyle()
})

</script>

<template>
  <el-upload
      ref="uploadRef"
      class="upload-box"
      v-model:file-list="fileList"
      :list-type="listTypeCmp"
      :action="action"
      :headers="headers"
      :with-credentials="withCredentials"
      :name="name"
      :show-file-list="showFileList"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-remove="onRemove"
      :on-preview="onPreview"
      :accept="accept"
      :limit="limit"
      :on-exceed="onExceed"
      :on-error="onError"
      :on-progress="onProgress"
      :auto-upload="autoUpload"
      :multiple="multiple"
  >
    <template #default v-if="autoUpload">
      <div class="upload">
        <div class="upload-default">
          <slot>
            <el-icon v-if="listTypeCmp==='picture-card'"
                     style="width: 100%;height: 100%;font-size: 1.88rem;color: #888888">
              <Plus/>
            </el-icon>
            <el-button v-else>上传文件</el-button>
          </slot>
        </div>

        <div v-if="listTypeCmp==='picture-card' && showTip" class="upload-tip abs-tip" @click="preventClick">
          <div class="tip-div" :title="tip"
               :class="{'text-overflow-ellipsis':showOverflowTooltip}">
            <span>{{ tip }}</span>
          </div>
        </div>
      </div>
    </template>
    <template #tip v-if="listTypeCmp!=='picture-card' && showTip">
      <div class="upload-tip" @click="preventClick">
        <div class="tip-div" :title="tip"
             :class="{'text-overflow-ellipsis':showOverflowTooltip}">
          <span>{{ tip }}</span>
        </div>
      </div>
    </template>
    <!--    自定义缩略图-->
    <template #file="{file}">
      <slot name="file" :file="file"></slot>
    </template>
    <template #trigger v-if="!autoUpload">
      <slot name="trigger"></slot>
    </template>
  </el-upload>
  <!--文件预览-->
  <el-dialog v-model="dialogVisible" width="80%">
    <video style="height: 100%;width: 100%" v-if="getSuffix(dialogFileUrl)==='mp4'" :src="dialogFileUrl" controls/>
    <el-image v-else style="height: 80vh" w-full :src="dialogFileUrl" alt="Preview Image"/>
  </el-dialog>
</template>

<style lang="scss" scoped>

.upload-box {
  box-sizing: border-box;

  .upload {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .abs-tip{
      position: absolute;
      bottom: -1.88rem;
      left: 0;
    }
  }

  .upload-tip {
    width: 100%;

    .tip-div {
      width: 100%;
      cursor: pointer;
      color: red;
      font-weight: 200;
      font-size: 0.75rem;
    }

    .text-overflow-ellipsis {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap; /* 不换行 */
      text-overflow: ellipsis; /* 超出部分显示为省略号 */
    }
  }
}
</style>