vue webapp项目中图片上传组件

<template>
  <div class="upload-img common-padding">
    <ul class="business-type no-margin" v-if="showTitle">
      <li class="list ">
        <label>{{title}}</label>
      </li>
    </ul>
    <div class="box">
      <template v-if="imageListValue instanceof Array && imageListValue.length > 0">
        <div class="upload-text"  v-for="(item, index) in imageListValue" :key="index"  @click="removeImg(item)">
          <img :src="publicHost + item.attachmentPath" class="result-img"/>
        </div>
      </template>
      <div class="receive-img"  v-if="(Object.prototype.toString.call(imageListValue) === '[object Object]') && Object.keys(imageListValue).length !== 0" @click="removeImg()">
        <img :src="publicHost + imageListValue.attachmentPath" class="result-img"/>
      </div>

      <label>
        <div class="upload-text" v-if="showAdd">
          <img src="./../../../static/img/common/add.png" class="add-plus"/>
        </div>
        <slot name="upload-img" v-if="!(imageListValue instanceof Array) && !imageListValue"></slot>
        <input type="file"  capture="camera" accept="image/png,image/gif,image/jpeg" class="hidden" @change="getBaseUrl($event)"/>
      </label>
    </div>
  </div>
</template>
<script>
import { MessageBox } from 'mint-ui'
import {uploadFileByBase64Str} from '@/api/file'
export default{
  data () {
    return {
      image: null,
      temp: []
    }
  },
  props: {
    title: {
      default: '标题',
      type: String
    },
    imageList: {},
    showAdd: {
      type: Boolean,
      default: true
    },
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    imageListValue: {
      get: function () {
        return this.imageList
      },
      set: function (newValue) {
        this.$emit('update:imageList', newValue)
      }
    },
    publicHost () {
      return this.$store.state.dictionary.publicHost + '/'
    }
  },
  components: {},
  methods: {
    removeImg (url) {
      MessageBox.confirm('是否删除该图片?').then(action => {
        if (this.imageListValue instanceof Array) {
          this.imageListValue.map(val => {
            if (val.attachmentPath === url.attachmentPath) {
              this.imageListValue.splice(this.imageListValue.indexOf(val), 1)
              this.$emit('deleteImg', val)
            }
          })
        } else {
          this.imageListValue = {}
        }
      })
    },
    getBaseUrl (e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)// 读出 base64
      let _this = this
      reader.onloadend = function () {
        const dataURL = reader.result
        const data = {
          fileName: file.name,
          fileStr: dataURL
        }
        uploadFileByBase64Str(data).then(res => {
          if (res.code === 200) {
            const attachmentUrl = res.result[0]
            if (_this.imageListValue instanceof Array) {
              _this.imageListValue.push(attachmentUrl)
            } else {
              _this.imageListValue = attachmentUrl
            }
          }
        })
      }
    }
  }
}
</script>
<style lang="less">
  #fileInput {
    display: none;
  }
  .box{
    .img-preview{
      display: none;
    }
  }
</style>
<style lang='less' scoped>
  @import "./../../public/comment";
  .hidden{
    display: none;
  }
  .upload-img{
    padding-bottom: 10px/2;
    margin-bottom: 10px/2;
    background-color: #fff;
    .business-type{
      margin: 20px auto;
    }
    .no-margin{
      margin: 0;
    }
    .upload-text{
      background: #F2F2F2;
      width: 160px/2;
      height: 160px/2;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px/2 20px/2;
      .result-img{
        width: 100%;
        height: 100%;
      }
      .add-plus{
        width: 60%;
      }
    }
    .receive-img{
      height: 160px/2;
      img{
        height: 100%;
      }
    }
  }
  .box{
    display: flex;
    flex-wrap: wrap;
  }
  .list{
    width: 100%;
    height: 104px/2;
    display: flex;
    align-items: center;
    font-size: 32px/2;
    color: #333333;
    background-color: #fff;
    margin-bottom: 5px/2;
    label{
      width: 260px/2;
    }
    .text-1{
      font-size: 28px/2;
      color: #999999;
    }
    .text-2{
      color: @lightBlue;
    }
  }

</style>