# ImageUpload 图片上传组件

通用图片上传组件，支持点击上传、拖拽上传、URL输入三种方式。

## 功能特性

- ✅ 支持点击上传和拖拽上传
- ✅ 支持手动输入图片URL
- ✅ 显示上传进度
- ✅ 支持图片预览和删除
- ✅ 通过 v-model 双向绑定图片URL
- ✅ 上传成功自动更新绑定的URL值
- ✅ 上传失败显示详细错误提示
- ✅ 前端文件类型校验（jpg、jpeg、png、gif、webp）
- ✅ 前端文件大小校验（默认10MB）

## 基本用法

```vue
<template>
  <el-form-item label="图片" prop="image">
    <ImageUpload v-model="formData.image" />
  </el-form-item>
</template>

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  image: ''
})
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 图片URL (v-model) | string | '' |
| disabled | 是否禁用 | boolean | false |
| placeholder | 上传区域占位文字 | string | '点击或拖拽上传' |
| urlPlaceholder | URL输入框占位文字 | string | '或输入图片URL' |
| showUrlInput | 是否显示URL输入框 | boolean | true |
| accept | 接受的文件类型 | string | 'image/jpeg,image/png,image/gif,image/webp' |
| maxSize | 最大文件大小(MB) | number | 10 |
| tip | 提示文字 | string | '' |

## Events

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 图片URL变化时触发 | (url: string) |
| change | 图片变化时触发 | (url: string) |
| upload-success | 上传成功时触发 | (response: UploadResponse) |
| upload-error | 上传失败时触发 | (error: any) |

## 文件校验

### 支持的图片格式
- jpg / jpeg
- png
- gif
- webp

### 文件大小限制
- 默认最大 10MB
- 可通过 `maxSize` 属性自定义

### 错误提示
组件会在以下情况显示错误提示：
- 文件格式不支持：显示"只支持 jpg、jpeg、png、gif、webp 格式的图片"
- 文件大小超限：显示"文件大小不能超过 10MB，当前文件大小为 X.XXMB"
- 网络错误：显示"网络错误，请检查网络连接"
- 上传超时：显示"上传超时，请检查网络后重试"
- 后端错误：显示后端返回的具体错误信息

## 使用示例

### 基础用法
```vue
<ImageUpload v-model="formData.image" />
```

### 隐藏URL输入框
```vue
<ImageUpload v-model="formData.image" :show-url-input="false" />
```

### 自定义提示
```vue
<ImageUpload 
  v-model="formData.image" 
  placeholder="上传封面图"
  tip="建议尺寸: 750x400，支持 jpg/png 格式"
/>
```

### 限制文件大小
```vue
<ImageUpload v-model="formData.image" :max-size="2" />
```

### 禁用状态
```vue
<ImageUpload v-model="formData.image" disabled />
```

## 改造指南

将现有的图片输入改为使用 ImageUpload 组件：

### 改造前
```vue
<el-form-item label="图片" prop="image">
  <div class="image-upload-container">
    <el-input v-model="formData.image" placeholder="请输入图片URL" />
    <el-image v-if="formData.image" :src="formData.image" fit="cover" />
  </div>
</el-form-item>
```

### 改造后
```vue
<el-form-item label="图片" prop="image">
  <ImageUpload v-model="formData.image" />
</el-form-item>
```

## 需要改造的页面清单

| 模块 | 文件 | 图片字段 |
|------|------|----------|
| 商品管理 | GoodsAddDialog.vue | imgUrl, imgUrlDetail |
| 商品管理 | GoodsEditDialog.vue | imgUrl, imgUrlDetail |
| 奖品管理 | PrizeAddDialog.vue | imgUrl, imgUrlDetail |
| 奖品管理 | PrizeEditDialog.vue | imgUrl, imgUrlDetail |
| 钻石充值 | DiamondFormDialog.vue | normalImage, normalSelectImage, firstChargeImage, firstSelectChargeImage |
| 悬浮球 | FloatBallFormDialog.vue | image, imageBj, imageDetails |
| 广告管理 | AdvertFormDialog.vue | imageUrl |
| 签到配置 | SignConfigFormDialog.vue | icon |
| 福利屋 | WelfareHouseFormDialog.vue | image |
| 基础配置 | base.vue | erweima, share_image |
