前端上传组件封装

组件功能

提供上传、显示列表、允许拖拽排序、批量预览、下载、删除等功能

组件预览

 

组件实现

<template>   <div>     <el-upload       :action="uploadUrl"       :accept="accept"       :limit="limit"       :on-exceed="handleExceed"       :before-upload="beforeUpload"       :headers="headers"       :show-file-list="false"       :file-list="fileList"       :on-success="handleSuccess"       class="upload-demo"       :multiple="multiple"     >       <slot name="uploadComponent">         <el-button size="small" v-if="isShowDel" type="text">{ {           uploadTxt         }}</el-button>       </slot>     </el-upload>     <slot name="filePreviewComponent"></slot>     <draggable       class="upload-list"       v-model="fileArr"       filter=".forbid"       animation="300"       @end="onMoveEnd"     >       <!-- <div> -->       <transition-group>         <div           v-for="(item, index) in fileArr"           :key="index"           class="upload-list-item"         >           <div :title="item.realName" class="upload-list-item-title">             <img               style="margin-right:5px"               :src="showTypeTip(item)"               width="15px"               height="18px"               alt=""             />             <span>{ { item.realName }}</span>           </div>           <div class="upload_options">             <span class="preview-class" @click="preview(item)">               <i class="el-icon-view"></i>               预览</span             >             <span class="down-class" @click="downloadFile(item)">               <i class="el-icon-download"></i>               下载</span             >             <span v-if="isShowDel" class="del-class" &