# ImageUpload 模块 - 快速开始

## 🚀 5分钟快速上手

### 1️⃣ 安装（1分钟）

```bash
# 自动加载新模块
composer dump-autoload

# 安装 AWS S3 依赖（如果使用S3）
composer require league/flysystem-aws-s3-v3 "^3.0"
```

### 2️⃣ 配置（1分钟）

在 `.env` 文件中添加：

```env
# 使用 S3 存储
IMAGE_UPLOAD_DISK=s3

AWS_ACCESS_KEY_ID=your-key
AWS_SECRET_ACCESS_KEY=your-secret
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=your-bucket
```

或使用本地存储：

```env
IMAGE_UPLOAD_DISK=public
```

### 3️⃣ 清除缓存（30秒）

```bash
php artisan config:clear
php artisan cache:clear
```

### 4️⃣ 开始使用（3分钟）

#### 管理后台

访问：`/admin/image-upload`

#### 前端 API

```javascript
// 上传单张图片
const formData = new FormData();
formData.append('image', fileInput.files[0]);
formData.append('directory', 'shop/uploads');

fetch('/api/image-upload/upload', {
    method: 'POST',
    body: formData,
    headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
    }
})
.then(res => res.json())
.then(data => {
    if (data.success) {
        console.log('图片URL:', data.data.url);
    }
});
```

#### Vue 组件

```vue
<template>
    <image-upload
        :multiple="false"
        directory="user/avatars"
        @uploaded="handleUpload"
    />
</template>

<script>
export default {
    methods: {
        handleUpload(data) {
            console.log('上传成功:', data.url);
        }
    }
}
</script>
```

## 📚 更多资源

- [完整文档](README.md) - 详细的功能说明和API参考
- [安装指南](INSTALLATION.md) - 详细的安装步骤和故障排除
- [前端示例](FRONTEND_EXAMPLES.md) - Vue、React、JavaScript等使用示例

## ✨ 核心功能

✅ 单张/批量图片上传  
✅ AWS S3 / 本地存储  
✅ 自动图片优化（WebP）  
✅ 文件验证（类型、大小）  
✅ 管理后台 + 前端支持  
✅ Vue 组件即用  
✅ RESTful API  

## 🔗 API 路由

| 用途 | 管理后台 | 前端 |
|------|---------|------|
| 上传单张 | `POST /admin/image-upload/upload` | `POST /api/image-upload/upload` |
| 上传多张 | `POST /admin/image-upload/upload-multiple` | `POST /api/image-upload/upload-multiple` |
| 删除图片 | `DELETE /admin/image-upload/delete` | `DELETE /api/image-upload/delete` |
| 获取URL | `GET /admin/image-upload/url` | `GET /api/image-upload/url` |

## 💡 常见用例

### 用户头像
```javascript
uploadSingleImage(file, 'user/avatars')
```

### 产品图片
```javascript
uploadMultipleImages(files, 'product/images')
```

### 评价图片
```javascript
uploadMultipleImages(files, 'review/images')
```

### 聊天消息
```javascript
uploadSingleImage(file, 'chat/messages')
```

## ❓ 遇到问题？

1. 检查 [.env](file://d:/work/bagisto/.env) 配置是否正确
2. 查看 [安装指南](INSTALLATION.md) 的故障排除部分
3. 检查日志：`storage/logs/laravel.log`

## 🎉 完成！

现在你可以在管理后台和前端使用图片上传功能了！

---

**需要帮助？** 查看完整文档或联系 dev@longyi.com