<template>
  <div class="app-container">
    <upload v-model="imageUrl" :width="114" :height="114" tips="上传图片" accept="image/jpeg,image/gif,image/png"></upload>
    <upload v-model="cropperImageUrl" :width="114" :height="114" tips="上传图片-裁剪" cropper :options="options" accept="image/jpeg,image/gif,image/png"></upload>
    <upload v-model="imageUrlList" :width="114" :height="114" tips="上传多图片" accept="image/jpeg,image/gif,image/png" multiple :limit="5"></upload>
    <upload v-model="cropperImageUrlList" :width="114" :height="114" tips="上传多图片-裁剪" cropper accept="image/jpeg,image/gif,image/png" multiple :limit="5"></upload>
    <upload v-model="imageOSSUrl" :width="160" :height="160" tips="上传图片至OSS" sts accept="image/jpeg,image/gif,image/png"></upload>
    <upload v-model="videoUrl" :width="300" :height="160" tips="上传视频" accept="video/mp4,video/avi"></upload>
    <upload v-model="audioUrl" :width="300" :height="54" tips="上传音频" accept="audio/mp3,audio/wav" @duration="onDuration"></upload>
    <upload v-model="fileUrl" :width="300" :height="54" tips="上传文件" accept="*/*"></upload>
    <upload v-model="fileUrlList" :width="300" :height="54" tips="上传多文件" accept="*/*" multiple :limit="5"></upload>
  </div>
</template>

<script>
import Upload from "@/components/Upload"

export default {
  name: "FileUpload",
  components: {Upload},
  data() {
    return {
      imageUrl: undefined,
      cropperImageUrl: undefined,
      imageOSSUrl: undefined,
      videoUrl: {},
      audioUrl: {},
      imageUrlList: [],
      cropperImageUrlList: [],
      fileUrlList: [{url: "http://192.168.1.13/media/1648100179938_cuhw6sfkez.png", name: "m.png"}],
      fileUrl: {},
      options: {
        fixedNumber: [1, 2] // 截图框的宽高比例
      }
    }
  },
  methods: {
    onDuration(duration) {
      console.log("音乐时长", duration);
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  & > * {
    margin-bottom: 20px;
  }
}
</style>
