解决elementUI上传多张图片出现闪动的bug

解决elementUI上传多张图片出现闪动的bug

实现效果:上传图片获取到路径过后，展示在image里面，自己手扣的删除及图片渲染

<template>
  <div style="display: inline-flex;">
    <div class="img-list-item common mb_10" v-for="(item,index) in fileList">
      <!-- <video width="150px" height="150px" style="padding: 0 5px;"  controls="controls" :src="item.url"> 您的浏览器不支持视频播放</video> -->
      <el-image
            :style="{width:w,height:h,margin:'0 9px'}"
            :src="item.url"
            fit="cover"></el-image>
      <i class="del-img" @click="forkImage(index)"></i>
    </div>
    <div v-if="maxlength<limit" @click="change">
    <el-upload action="oss地址"
               :data="dataObj" :show-file-list="false"
               :auto-upload="true"
               :on-remove="handleRemove"
               :on-success="handleUploadSuccess"
               :before-upload="beforeUpload"
               :on-progress="uploadVideoProcess">
      <span class="warpss">
        <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;position: relative;top: -15px;">
        </el-progress>
        <i v-else class="el-icon-plus" :style="{color:'#8C939D',fontSize: '18px',fontWeight:'bold',padding:paddings,position:'relative',top:'60px'}"></i>
      </span>
    </el-upload>
    </div>
  </div>
</template>
<script>
  import {
    policy1
  } from '@/api/oss'
  export default {
    props: {
      limit:{
        type:Number,
        default: 5
      },
      maxlength:{
        type:Number
      },
      value: Array,
      //最大上传图片数量
      maxCount: {
        type: Number,
        default: 5
      },
      w: {
        type: String,
        // default:'100px'
      },
      h: {
        type: String,
        // default:'100px'
      },
      paddings: {
        type: String,
      }
    },
    data: function() {
      return {
        videoFlag: false,
        isShow:true,
        videoUploadPercent: 0,
        count:5,
        videis: false,
        dataObj: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: ''
        },
        dialogVisible: false,
        dialogImageUrl: []
      }
    },
    computed: {
      fileList() {
        let fileList = [];
        for (let i = 0; i < this.value.length; i++) {
          fileList.push({
            url: this.value[i]
          });
        }
        this.$emit('videoData23',fileList);
        console.log('视频---->', fileList);
        console.log('视频22222222222222---->', this.dialogImageUrl);
        return fileList;
      }
    },
    mounted() {
      if(this.fileList.length<this.limit){
         this.isShow = true;
      }else{
        this.isShow = false;
      }
    },
    methods: {
      //删除视频
      forkImage(index) {
        console.log('当前索引', index);
        // let newFileList=[];
        // newFileList=this.fileList;
        // console.log(newFileList,'新数组');
        var data = this.fileList.splice(index, 1);
        // this.dialogImageUrl.splice(index, 1);
        console.log('删除后的数组数组', this.fileList);
        this.$emit("delFile", this.fileList);
        if(this.fileList.length<this.limit){
           this.isShow = true;
        }else{
          this.isShow = false;
        }
      },
      change(){
        console.log('点',this.fileList)
        if(this.fileList.length<this.limit){
           this.isShow = true;
        }else{
          this.isShow = false;
        }
      },
      getUUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
          return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
        })
      },
      emitInput(fileList) {
        let value = [];
        for (let i = 0; i < fileList.length; i++) {
          value.push(fileList[i].url);
        }
        this.$emit('input', value)
      },
      handleRemove(file, fileList) {
        this.emitInput(fileList)
        console.log('删除视频方法',fileList);
      },
      handleUploadSuccess(res, file) {
        // console.log("成功后", file)
        // console.log('获取图片', res.data);
        let url = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
        // console.log('路径', url);
        this.fileList.push({
          name: file.name,
          url: url
        });
        this.emitInput(this.fileList);
        this.dialogVisible = true;
        // this.dialogImageUrl.push(url);
        console.log("视频地址", this.fileList);
        // this.videoFlag = false;
        this.videoUploadPercent = 0;
        if(this.fileList.length<this.limit){
           this.isShow = true;
        }else{
          this.isShow = false;
          this.$message({
            message: '最多只能上传' + this.limit + '张图片',
            type: 'warning',
            duration: 1000
          });
        }
      },
      uploadVideoProcess(event, file, fileList) {
        // this.videoFlag = true;
        this.videoUploadPercent = Math.floor(event.percent);
      },
      beforeUpload(file) {
        // this.videoFlag = true;
        console.log("上传视频值", file);
        const _self = this
        return new Promise((resolve, reject) => {
          policy1().then(response => {
            console.log("视频---->获取数据", response.data);
            _self.dataObj.policy = response.data.policy;
            // console.log('policy值',response.data.policy);
            _self.dataObj.signature = response.data.signature;
            // console.log('signature值',response.data.signature);
            _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
            // console.log('ossaccessKeyId值',response.data.accessKeyId);
            _self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
            console.log('视频---->key值', response.data.dir + this.getUUID() + '_${filename}');
            _self.dataObj.dir = response.data.dir;
            console.log('视频---->dir值', response.data.dir);
            _self.dataObj.host = response.data.host;
            _self.dataObj.callback = response.data.callback;
            resolve(true)
          }).catch(err => {
            console.log(err)
            reject(false)
          })
        })
      },
      handlePreview(file) {
        // console.log('获取视频', file.url);
        this.dialogVisible = true;
        this.dialogImageUrl = file.url;
      },
      handleExceed(files, fileList) {
        // console.log("获取上传视频", files, fileList);
        this.$message({
          message: '最多只能上传' + this.maxCount + '张图片',
          type: 'warning',
          duration: 1000
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
  .warpss {
    display: inline-block;
    // padding: 54px 64px;
    width: 150px;
    height: 151px;
    border: 1px dashed #DEE5ED;
  }

  /deep/.el-upload-list {
    display: none;
  }

  .el-upload-video {
    width: 149px;
    height: 149px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-upload-video-i {
    font-size: 20px;
    font-weight: bold;
    padding-top: 43px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }

  //视频
  .img-list-item {
    position: relative;
    margin: auto;
  }

  // .img-list-item img {
  //   box-sizing: border-box;
  //   vertical-align: middle;
  //   border: 0;
  // }

  .img-list-item i.del-img {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: rgba(0, 0, 0, .6);
    background-image: url(../assets/images/close.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    top: 0;
    right: 9px;
  }
</style>