<!--
 * @Date: 2022-08-31 16:16:49
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-08-31 16:39:08
 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="image-uploader-field">
    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
    <div style="padding: 1rem;">
      <van-uploader upload-icon="add" :before-read="beforeRead" :after-read="afterRead" v-model="fileList" multiple />
    </div>
  </div>
</template>

<script setup>
import { Toast } from 'vant';

const props = defineProps({
  item: Object
})

// 上传前置处理
const beforeRead = (file) => {
  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
    Toast('请上传 jpg/png 格式图片');
    return false;
  }
  return true;
};

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
};

const fileList = ref([
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
  // { url: 'https://cloud-image', isImage: true },
]);
</script>

<style lang="less" scoped>
.image-uploader-field {
  .label {
    padding: 1rem 1rem 0 1rem;
    font-size: 0.9rem;
    font-weight: bold;

    span {
      color: red;
    }
  }
}
</style>