<template>
  <div>
    <div v-show="multiple">
      <label for="file">+</label>
      <img v-show="multiple && imgShow" :src="img" alt="">
      <input id="file" type="file" multiple @change="selectImg">
    </div>
    <div v-show="!multiple">
      <label for="file1">+</label>
      <input id="file1" type="file" @change="selectImg">
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      multiple: {
        type: Boolean,
        default: false
      },
      action: {
        type: String,
        default: ''
      },
      img: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        imgShow: false
      }
    },
    mounted () {
      console.warn(this.action)
    },
    methods: {
      selectImg (file) {
        console.warn(file)
        let formData = new FormData()
        formData.append('file', file.target.files[0])
        formData.append('type', 'test')
        this.$vux.loading.show({
          text: '正在上传'
        })
        axios.post(this.action, formData)
        .then((res) => {
          console.warn(res)
          this.imgShow = true;
          this.$vux.loading.hide()
          this.$emit('success', res.data)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  div {
    margin-top: 10px;
  }
  label {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 1px solid #d6d7dc;
    text-align: center;
    line-height: 46px;
    color: #d6d7dc;
    font-size: 42px;
    cursor: pointer;
    vertical-align: top;
  }
  img {
    width: 50px;
    height: 50px;
  }
  input[type="file"] {
    display: none;
  }
</style>