Element el-upload上传图片,视频二次封装。

优雅格子衫

已于 2024-07-10 18:15:40 修改

阅读量572

点赞数 3

分类专栏： Element vue 文章标签： vue.js 前端 javascript elementui el-upload 音视频上上传

于 2024-05-16 23:36:54 首次发布

本文链接：https://blog.csdn.net/qq_61869009/article/details/138978526

版权

对element-ui组件的upload组件再一次封装，简单记录。下面是效果图。

注意点：该组件现在仅支持单图和单个视频上传。

<template>
  <div :style="myStyle">
    <div
      class="uploads"
      :style="{
        width: upWith + 'px',
        height: upHeight + 'px',
        borderRadius: upBradius + 'px',
      }"
    >
      <div v-if="pathUrl" class="isblock">
        <div v-show="utype == 1">
          <el-image
            ref="preview"
            :style="{
              width: upWith + 'px',
              height: upHeight + 'px',
              borderRadius: upBradius + 'px',
            }"
            :preview-src-list="[pathUrl]"
            :src="pathUrl"
          ></el-image>
          <div class="imgs_prews">
            <div
              class="imgs_prew"
              :style="{
                width: upWith + 'px',
                height: upHeight + 'px',
                borderRadius: upBradius + 'px',
              }"
            >
              <i @click="ylimg()" class="el-icon-view"></i>
              <span></span>
              <i @click="deleteimg()" class="el-icon-delete"></i>
            </div>