Element-ui框架Upload上传组件开发整理_<uploadfile ref="uploadref" :filetype="[]" :data="-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45849112/article/details/114404414

本文详细介绍了Element-ui框架中的Upload上传组件，从实际效果展示到页面引入步骤，再到自定义组件的开发，全面解析了Upload组件的使用方法，并提供了官方文档链接以供深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果

在这里插入图片描述

页面引入部分

 <vUpload
 	ref="uploadList"
    :auto-upload="true"
    :file-data="fileData"
    :upload-nums="5"
    list-type="picture-card"
    @handleEvent="filelistEvent"
    @handleRemove="fileListRemove"
  />

upload自定义组件

/**
* @description: 上传组件
* @param: {multiple | Boolean} 是否支持多选文件 默认true
* @param: {autoUpload | Boolean} 是否自动上传  默认false
* @param: {uploadType | String} 上传文件类型
* @param: {uploadNums | Number} 上传文件个数 默认-1  无限大
* @param: {listType | String} 列表类型 默认 picture
**/
<template>
  <div class="one-img">

    <i v-if="oneImg && imgUrl" class="el-icon-circle-close dele" @click="uploadRemoveOne" />
    <el-upload
      v-if="oneImg"
      ref="upload"
      :multiple="multiple"
      :auto-upload="autoUpload"
      :before-upload="uploadBefore"
      :on-remove="uploadRemove"
      :on-error="uploadError"
      :http-request="upload"
      action=""
    >
      <div>
        <el-image
          v-if="imgUrl"
          :src="imgUrl"
          style="width: 80px; height: 80px"
          fit="cover"/>
        <el-button
          v-else
          type="primary"
        >
          {
  
  { actionName }}
        </el-button>
      </div>
    </el-upload>
    <el-upload
      v-else
      ref="upload"
      :multiple="multiple"
      :auto-upload="autoUpload"
      :before-upload="uploadBefore"
      :on-remove="uploadRemove"
      :on-error="uploadError"
      :file-list="fileList"
      :list-type="listType"
      :limit="uploadNums"
      :on-exceed="onExceed"
      :http-request="upload"
      :show-file-list="showfilelist"
      action=""
    >
      <el-button
        slot="trigger"
        type="primary"
      >
        {
  
  { actionName }}
      </el-button>
      <el-button
        v-if="!autoUpload"
        style="margin-left: