✨ feat: 新增图片上传组件

+<!--
+ * @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>

@@ -7,6 +7,7 @@ import CheckboxField from '@/components/CheckboxField/index.vue'
 import PickerField from '@/components/PickerField/index.vue'
 import AreaPickerField from '@/components/AreaPickerField/index.vue'
 import DatePickerField from '@/components/DatePickerField/index.vue'
+import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -18,6 +19,7 @@ import DatePickerField from '@/components/DatePickerField/index.vue'
  * @type picker 单列选择器 PickerField
  * @type area_picker 省市区选择器 AreaPickerField
  * @type date_picker 日期选择器 DatePickerField
+ * @type image_uploader 图片上传 ImageUploaderField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -58,5 +60,8 @@ export function createComponentType(data) {
     if (item.component_props.name === 'date_picker') {
       item.component = DatePickerField;
     }
+    if (item.component_props.name === 'image_uploader') {
+      item.component = ImageUploaderField;
+    }
   })
 }

@@ -124,6 +124,13 @@ onMounted(() => {
       min_date: new Date(),
       columns_type: ['year', 'month']
     },
+  }, {
+    key: 'imageUploader',
+    value: '',
+    label: '图片上传',
+    component_props: {
+      name: 'image_uploader'
+    }
   }];
   // 生成自定义组件
   createComponentType(mockData.value)