mall-web-ssr/components/common/image-upload/imageUpload.vue

<template>
  <div>
    <el-upload
      action = "https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      list-type="picture-card"
      :on-success="uploadSuccess">
      <img src="/images/messageBoard/msg_uploadPic.png" alt="">
    </el-upload>
    <el-dialog v-model="dialogVisible" size="tiny" id="preview">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
    <!--<div v-model="dialogVisible" size="tiny" id="preview">-->
      <!--<img :src="dialogImageUrl" width="100%" alt="">-->
    <!--</div>-->
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
      handleRemove (file, fileList) {
        console.log(file)
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
        let preview = document.querySelector('.el-upload-list__item-preview')
        preview.setAttribute('date-toggle', 'modal')
        preview.setAttribute('date-target', '#preview')
      },
      uploadSuccess (response, file, fileList) {
        this.$emit('fileAction', file.url)
      }
    }
  }
</script>
<style scoped>
  @import "~element-ui/lib/theme-default/index.css";
  input[type="file"] {
    display: none;
  }
  .el-upload--picture-card {
    position: relative;
    width: 82px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    cursor: pointer;
    border-radius: 0;
    box-sizing: border-box;
    border: none;
  }
  .el-upload--picture-card:hover {
    border-color: #ddd;
    color: transparent;
  }
  .el-upload-list--picture-card {
    margin: 0;
    display: inline-block;
    vertical-align: top;
    height: 72px;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    margin: 0;
    width: 82px;
    height: 70px;
    border: 1px solid #ccc;
    border-radius: 0;
    background: transparent;
  }
  .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    max-width: 82px;
    max-height: 66px;
  }
  .el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: none;
  }
  [class*=" el-icon-"], [class^=el-icon-] {
    font-size: 14px;
  }
  .el-icon-delete2 {
    position: absolute;
    top: 3px;
    right: 3px;
    /*top: 3px;*/
    /*right: -30px;*/
  }
  /*.el-icon-view{*/
    /*display: none;*/
  /*}*/
  /*.el-upload-list__item-preview{*/
    /*display: none;*/
  /*}*/
  .el-upload-list__item-preview .el-icon-view {
    margin-right: 7px;
  }
  .el-upload-list__item-preview:after{
    content: '查看';
    font-size: 14px;
  }
  .el-upload-list--picture-card .el-upload-list__item-actions{
    position: absolute;
    left: 0;
    top: 0;
    text-align: right;
  }
  .el-dialog--tiny {
    width: 35%;
  }
  .v-modal{
    z-index: 1983;
  }
</style>