<template>
  <el-card
    header="ele-form-image-uploader 演示"
    shadow="never"
    style="max-width: 1250px;margin: 20px auto;"
  >
    <ele-form
      :form-data="formData"
      :form-desc="formDesc"
      :request-fn="handleRequest"
      @request-success="handleSuccess"></ele-form>
  </el-card>
</template>

<script>
  export default {
    data () {
      return {
        formData: {
          avatar:'http://172.16.90.8:8080/profile/upload/2019/12/31/2497b2d6975bfbfd9a7d25784b67ed4c.jpg'
        },
        formDesc: {
          avatar: {
            label: '头像',
            type: 'image-uploader',
            attrs: {
              disable : true,
              fileSize: 3,
              responseFn (response, file) {
                return response.url
              },
            }
          },
          covers: {
            label: '封面',
            type: 'image-uploader',
            attrs: {
              drag: true, // 多张
              responseFn (response, file) {
                return response.url
              }
            }
          }
        }
      }
    },
    methods: {
      handleRequest (data) {
        console.log(data)
        return Promise.resolve()
      },
      handleSuccess () {
        this.$message.success('提交成功')
      }
    },
    mounted () {}
  }
</script>

<style scoped>
  body {
    background-color: #f0f2f5;
  }
</style>
