nshop/packages/Longyi/ImageUpload/QUICKSTART.md

ImageUpload 模块 - 快速开始

🚀 5分钟快速上手

1️⃣ 安装（1分钟）

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

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

2️⃣ 配置（1分钟）

在 .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

或使用本地存储：

IMAGE_UPLOAD_DISK=public

3️⃣ 清除缓存（30秒）

php artisan config:clear
php artisan cache:clear

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

管理后台

访问：/admin/image-upload

前端 API

// 上传单张图片
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 组件

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

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

📚 更多资源

• 完整文档 - 详细的功能说明和API参考
• 安装指南 - 详细的安装步骤和故障排除
• 前端示例 - 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

💡 常见用例

用户头像

uploadSingleImage(file, 'user/avatars')

产品图片

uploadMultipleImages(files, 'product/images')

评价图片

uploadMultipleImages(files, 'review/images')

聊天消息

uploadSingleImage(file, 'chat/messages')

❓ 遇到问题？

1. 检查 .env 配置是否正确
2. 查看 安装指南 的故障排除部分
3. 检查日志：storage/logs/laravel.log

🎉 完成！

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

---

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