<template>

  <el-upload
    class="upload-demo"
    :action="actionUrl"
    list-type="picture-card"
    :http-request="onUpload"
    :auto-upload="true"
    :on-success="onSuccessUpload"
    :on-remove="onRemoved"
    :on-exceed="onExceed"
    :limit="max"
    :file-list="fileList">
    <i class="el-icon-plus"></i>
  </el-upload>

</template>

<script>

  export default {
    props: {
      max: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        fileList: []
      }
    },
    methods: {
      onUpload(req) {
        let f = req.file
        this.$oss.upload('images', f)
        .then(r => {
          req.onSuccess(r)
        })
        .catch(e => {
          req.onError(e)
        })
      },
      onSuccessUpload(r, f, l) {
        f.url = r.url
        this.fileList = l
      },
      onRemoved(f, l) {
        this.fileList = l
      },
      onExceed(f, l) {
        this.$message({
          message: '图片数量不能超过' + this.max + "张",
          type: 'warning'
        })
      },
      pushList(list) {
        this.$nextTick(() => {
          this.fileList = this.fileList.concat(list)
        })
      },
      getList() {
        return this.fileList.filter(r => { return r.status == 'success' }).map(r => { return r.url })
      }
    },
    computed: {
      actionUrl() {
        return ""
      }
    }
  }

</script>

<style scoped>
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
