CImagePicker 图片选择器组件

功能说明

CImagePicker 是一个图片选择器组件，用于在表单中上传和管理图片。组件支持单张和多张图片上传，支持预览、删除等功能，并且可以限制上传图片的数量和大小。

引用方式

import { CImagePicker } from '@components/forms/imagePicker';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• maxCount (Number，可选)：最大上传图片数量，默认为 9
• maxSize (Number，可选)：单张图片最大大小，单位为 MB，默认为 5
• compress (Boolean，可选)：是否压缩图片，默认为 true
• quality (Number，可选)：图片压缩质量，取值范围 0-1，默认为 0.8
• placeholder (String，可选)：选择器占位提示文本
• readOnly (Boolean，可选)：只读模式，默认为 false

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="photos" label="图片上传">
      <CImagePicker 
        :maxCount="3" 
        placeholder="请上传图片" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CImagePicker } from '@components/forms/imagePicker';

export default {
  components: {
    CForm,
    CFormItem,
    CImagePicker
  },
  data() {
    return {
      form: {
        photos: []
      }
    };
  }
};
</script>

自定义配置

<CFormItem name="certificate" label="证书照片">
  <CImagePicker 
    :maxCount="1" 
    :maxSize="2" 
    :compress="true" 
    :quality="0.6" 
    placeholder="请上传证书照片" 
  />
</CFormItem>

注意事项

1. 组件会自动处理图片上传，支持压缩和预览功能
2. 上传的图片会被转换为 base64 格式存储在表单数据中
3. 当设置 maxCount 为 1 时，组件会以单图模式运行
4. 建议根据实际需求设置合适的 maxSize 和压缩参数
5. 在只读模式下，只能查看已上传的图片，无法进行上传和删除操作