【el-upload】el-upload组件 - list-type=“picture“ 时,文件预览展示优化

目录

问题图

el-upload

html 复制代码
<el-upload
  ref="upload"
  multiple
  drag
  action="#"
  :auto-upload="false"
  :file-list="fileList"
  name="files"
  :accept="`.png,.jpg,.jpeg,.JGP,.JPEG,.PNG,.doc,.docx,.xls,.xlsx${isTz ? ',.mp4,.MP4' : ''}`"
  :on-change="beforeAvatarUpload"
  list-type="picture"
>
  <i class="el-icon-upload" />
  <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  <div slot="tip" class="el-upload__tip">
    支持上传png/jpg/jpeg/doc/docx/xls/xlsx文件,且不超过5M
  </div>
  <!-- 【使用组件】 -->
  <div slot="file" slot-scope="{ file }">
    <PicturePreview :file="file" @remove="removeFile" />
  </div>
</el-upload>

import PicturePreview from '@/components/PicturePreview'

components:{PicturePreview}

removeFile(file) {
  this.$refs.upload.handleRemove(file)
},

预览组件 PicturePreview

html 复制代码
<!-- el-upload组件 - list-type="picture" 时,文件预览展示优化 -->
<template>
  <div class="file_container">
    <div class="file">
      <el-image
        v-if="/(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(fileType)"
        :src="file.url"
        :preview-src-list="[file.url]"
      />
      <i v-else class="el-icon-tickets" />
    </div>
    <div class="name">{{ file.name }}</div>
    <i class="el-icon-close" @click="$emit('remove', file)" />
  </div>
</template>

<script>
export default {
  name: 'PicturePreview',
  components: {},

  props: {
    file: {
      type: Object,
      required: true
    }
  },

  data() {
    return {}
  },

  computed: {
    fileType() {
      return this.file.name.split('.').pop()
    }
  },

  watch: {},

  created() {},

  methods: {}
}
</script>

<style lang='scss' scoped>
.file_container {
  position: relative;
  .file {
    $size: 80px;
    width: $size;
    height: $size;
    background-color: #f7f7f7;
    position: absolute;
    left: -85px;
    top: -5px;

    display: flex;
    align-items: center;
    justify-content: center;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .el-icon-tickets {
      font-size: 30px;
    }
  }
  .name {
  }
  .el-icon-close {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
  }
}
</style>

效果展示

相关推荐
RadiumAg15 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo19 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele35 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258592 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1235 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜055 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js