Element UI框架中图片上传组件详解

实现：

<template>
  <div class="photo-list-upload">
    <el-upload
    ref="update"
      :class="{uploadhidden:hiddenLimit}"
      action="七牛云地址"
      list-type="picture-card"
      :limit="limits"
      :data="params"
      :file-list="photoList"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-progress="handleChange"
      :disabled="disabled"
      multiple>
      <i class="el-icon-plus"></i>
      <!-- <div slot="tip" class="el-upload__tip">{{ tip }}</div> -->
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>

</template>
<script>
import axios from "axios";
import Vue from 'vue'
  export default {
    props:{
      modalType:String,
      disabled:Boolean,
      photoList:{
        type:Array,
        default: () => []
      },
      limits:{
        type:Number,
        default:4
      },
      type:String,
      showLimit:Boolean,
      Num:Number
    },
    data() {
      return {
        savaNum:null,
        isShow:false,
        hiddenLimit:false,
        // limit:4,
        list:[],
        dialogImageUrl: '',
        dialogVisible: false,
        listChange:[],
        params:{
          token:""
        }
      };
    },
    watch:{
      photoList:(newVal, oldVal)=>{
       
      },
      showLimit:(val)=>{
        
      }
    },
    created(){
      if(this.Num){
        this.savaNum = this.Num;
      }
    },
    mounted(){

    },
    updated(){
      //切换个人跟企业认证时，做判断
      // console.log('Num=',this.Num,"savaNum=",this.savaNum,"limits=",this.limits)
      if(this.Num && this.savaNum != this.Num){
        this.savaNum = this.Num
        this.isShow = false
      }
      // 编辑回显时如果长度等于限制长度，隐藏上传按钮
      if(this.isShow){

      }else{
        if(this.type=="en" || this.type=="pe"){
          if(this.photoList.length>=this.limits ){
            this.hiddenLimit = true
          }else{
            this.hiddenLimit = false
          }
        }else{
          if(this.photoList.length>=this.limits ){
            this.hiddenLimit = true
          }
        }
      }

    },
    methods: {
      handleExceed(files, fileList) {
        // console.log('图片限制',fileList)
        this.$message.warning(`最多只可上传${this.limits}张图片`);
      },
      handleChange(file, item){
        console.log('文件按上传时',file)
        console.log('文件按上传时',item)
        // 现在图片数量
        let arr = []
        arr = this.list.filter(val=>{
          return item.key==val.key
        })
        if(arr.length>0){
          return false
        }
      },
      handleRemove(file, fileList) {
        this.isShow = true;
        this.list = fileList.map(function(item){
          item.key = item.key ? item.key: "";
          return  item
        });
        let tempRemove = this.list.findIndex(item => {
          return item.key == file.key;
        });
        if (tempRemove >= 0) {
          this.list.splice(tempRemove, 1);
        }
        if(fileList.length<this.limits){
          this.hiddenLimit=false;
        }
        this.$emit("handlePhotoListRemove",this.list);
      },
      // 点击图片放大
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeUpload(file) {
        console.log('上传之前',file)
        const isJPG =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/jpg" ||
          file.type === "image/gif" ||
          file.type === "image/webp" ||
          file.type === "image/bmp";
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error(
            "上传图片仅支持jpg、jpeg、png、gif、webp、bmp格式!"
          );
          return false;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
          return false;
        }
        const _this = this;
        return new Promise((resolve, reject) => {
          axios
            .post('/kernel-comm/api/qiniu/getToken',{
              params:{
                token:$cookies.get('token')
              }
            })
            .then(response => {
              _this.params.token = response.data.upToken;
              resolve(true);
            })
            .catch(() => {
              reject(new Error("false"));
            });
        });
      },
      // 图片上传成功时返回给后台的数据
      handleSuccess(res, file, fileList) {
        console.log('res, file, fileList',res, file, fileList)
        this.isShow = true;
        // const uid = file.uid;
        // const key = res.key;
        // const name = file.name;
        // const url = file.url;
        // const status = file.status;
       
        //若支持拖拽，超出上传图片数量，则隐藏删除、查看图标
        if(fileList.length>=this.limits){
          this.hiddenLimit = true;
        }
        let tempRemove = this.list.findIndex(item => {
          return item.key == file.key;
        });
        this.list = fileList.map(function(item){
          // this.list.push(item.response.key)
          item.key = item.response ? item.response.key : item.key ? item.key : "";
          // item.type=this.type
          return  item
        });
        // this.first = false;
        console.log('list',this.list)
        this.$emit("handlePictrue", this.list);
      },
    }
  }
</script>
<style scoped>

</style>
<style lang='less'>

 .v-modal{
   z-index: 2000 !important;
  } 
  // .v-modal{
  //   display:none;
  // }
  .el-dialog__wrapper{
    .el-dialog{
      margin-top:1vh !important;
      margin-bottom:1vh;
      .el-dialog__header {
        border-bottom: 0px solid #eee;
      }
      .el-dialog__body {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
        height: 90vh;
        overflow: hidden;
        img {
          border-style: none;
          // height: 90vh;
        }
      }
    }
  }

  .photo-list-upload {
    .el-upload--picture-card {
      width: 80px;
      height: 80px;
      line-height: 90px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      background: #fff;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 80px;
      height: 80px;
    }
    .el-upload--picture-card .el-upload-dragger{
      width: 80px;
      height: 80px;
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: none;
    }
    .el-upload__tip {
      line-height: 17px;
      font-size: 12px;
      color: #999999;
      width: 124px;
    }
    .logo-tip {
      position: absolute;
      top: 0;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      padding: 0 3px;
      background: #409eff;
      color: #fff;
    }
    .el-icon-close-tip{
      display:none;
    }
  }
  .uploadhidden{
    .el-upload--picture-card{
      display: none;
    }
  }
</style>