<!-- 作者：ljz -->
<template>
  <div>
      <poi-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple accept=".png"
        :limit="3" 
        :on-exceed="handleExceed"
        :file-list="fileList">
        <poi-button size="small" type="primary">点击上传</poi-button>
      </poi-upload>
      <poi-upload
        class="upload-demo"
        drag 
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple>
        <i class="iconfont poi-icon-upload"></i>
        <div class="poi-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="poi-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </poi-upload>
        <poi-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </poi-upload>
        <div :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        fileList: [{name: 'food.jpeg', 
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
        {name: 'food2.jpeg',
         url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        dialogImageUrl: '',
        dialogVisible: false,
    };
  },

  components: {
  },

  computed: {
  },

  mounted(){
  },

  methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        console.log(file);
        // return this.$confirm(`确定移除 ${ file.name }？`);
        alert("移除指令");
      }
  },
  // 自定义指令
  directives: {
  }
}

</script>
<style scoped>
</style>