✨ feat: 新增多图片上传模块

 <!--
 <!--
  * @Date: 2022-08-31 16:16:49
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-31 16:39:08
+ * @LastEditTime: 2022-09-06 14:49:08
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -9,25 +9,48 @@
   <div class="image-uploader-field">
   <div class="image-uploader-field">
     <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
     <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
     <div style="padding: 1rem;">
     <div style="padding: 1rem;">
-      <van-uploader upload-icon="add" :before-read="beforeRead" :after-read="afterRead" v-model="fileList" multiple />
+      <van-uploader upload-icon="add" :before-read="beforeRead" :after-read="afterRead" v-model="fileList"
+        :multiple="item.component_props.multiple" />
     </div>
     </div>
+    <div class="type-text">上传格式：{{ type_text }}</div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+/**
+ * 图片上传
+ * @param name[String] 组件名称
+ * @param image_type[Array] 图片上传类型
+ * @param multiple[Boolean] 图片多选
+*/
 import { Toast } from 'vant';
 import { Toast } from 'vant';
+import _ from 'lodash'
 
 
 const props = defineProps({
 const props = defineProps({
   item: Object
   item: Object
 })
 })
 
 
+const type_text = computed(() => {
+  return props.item.component_props.image_type.join('/')
+})
+
 // 上传前置处理
 // 上传前置处理
 const beforeRead = (file) => {
 const beforeRead = (file) => {
-  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
-    Toast('请上传 jpg/png 格式图片');
-    return false;
+  const image_types = _.map(props.item.component_props.image_type, item => `image/${item}`)
+  let flag = true;
+  if (_.isArray(file)) { // 多张图片
+    const types = _.difference(_.uniq(_.map(file, item => item.type)), image_types); // 数组返回不能上传的类型
+    if (types.length) {
+      flag = false;
+      Toast('请上传指定格式图片');
+    }
+  } else {
+    if (!_.includes(image_types, file.type)) {
+      Toast('请上传指定格式图片');
+      flag = false;
+    }
   }
   }
-  return true;
+  return flag;
 };
 };
 
 
 const afterRead = (file) => {
 const afterRead = (file) => {
@@ -54,5 +77,12 @@ const fileList = ref([
       color: red;
       color: red;
     }
     }
   }
   }
+
+  .type-text {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    padding-bottom: 1rem;
+    color: gray;
+  }
 }
 }
 </style>
 </style>

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-02 11:16:29
+ * @LastEditTime: 2022-09-06 14:41:04
  * @FilePath: /data-table/src/views/index.vue
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -148,7 +148,9 @@ onMounted(() => {
     value: '',
     value: '',
     label: '图片上传',
     label: '图片上传',
     component_props: {
     component_props: {
-      name: 'image_uploader'
+      name: 'image_uploader',
+      image_type: ['jpg', 'png'],
+      multiple: false
     }
     }
   }];
   }];
   // 生成自定义组件
   // 生成自定义组件