<template>
  <div class="up_ex_container">
    <h3>带有裁剪功能的图片上传</h3>
    <upload-file
      :multiple="false"
      :max="4"
      type="cropper"
      :readOnly="false"
      :list="imgList"
      @getNewList="getNewList"
    ></upload-file>
    <h3>element的图片上传</h3>
    <upload-file
      :multiple="false"
      :max="4"
      type="picture"
      :readOnly="false"
      fit="fill"
      :list="imgList"
      @getNewList="getNewList"
    ></upload-file>
    <h3>其他类型的文件上传，</h3>
    <upload-file
      :multiple="false"
      :max="4"
      type="mp3"
      :readOnly="false"
      fit="fill"
      :list="imgList"
      @getNewList="getNewList"
    ></upload-file>
  </div>
</template>

<script>
import uploadFile from "@/components/upload_file";
export default {
  data() {
    return {
      imgList: [],
      imgList1: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      ]
    };
  },
  mounted() {
    setTimeout(() => {
      this.imgList = this.imgList1;
    }, 1000);
  },
  methods: {
    // get a new file list as an array
    getNewList(val) {
      console.log(val);
    }
  },
  components: {
    uploadFile
  }
};
</script>
<style scoped>
.up_ex_container {
  padding: 20px 0;
  margin-top: 84px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
}
</style>