|
@@ -0,0 +1,102 @@
|
|
|
|
|
+# ImageWithVideo 组件
|
|
|
|
|
+
|
|
|
|
|
+一个支持图片和视频上传的 Vue 3 组件，具有网格布局、拖拽上传、预览等功能。
|
|
|
|
|
+
|
|
|
|
|
+## 功能特性
|
|
|
|
|
+
|
|
|
|
|
+- ✅ 支持图片和视频文件上传
|
|
|
|
|
+- ✅ 网格布局显示预览
|
|
|
|
|
+- ✅ 拖拽上传支持
|
|
|
|
|
+- ✅ 单文件/多文件模式
|
|
|
|
|
+- ✅ 文件类型和大小验证
|
|
|
|
|
+- ✅ 视频缩略图生成
|
|
|
|
|
+- ✅ 响应式设计
|
|
|
|
|
+- ✅ 自定义提示内容
|
|
|
|
|
+- ✅ 十字图标设计
|
|
|
|
|
+
|
|
|
|
|
+## 基本用法
|
|
|
|
|
+
|
|
|
|
|
+```vue
|
|
|
|
|
+<template>
|
|
|
|
|
+ <ImageWithVideo
|
|
|
|
|
+ :multiple="true"
|
|
|
|
|
+ @upload="handleUpload"
|
|
|
|
|
+ @error="handleError"
|
|
|
|
|
+ />
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import ImageWithVideo from './components/imageWithVideo/imageWithVideo.vue'
|
|
|
|
|
+
|
|
|
|
|
+const handleUpload = (previews) => {
|
|
|
|
|
+ console.log('上传的文件:', previews)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const handleError = (error) => {
|
|
|
|
|
+ console.error('错误:', error)
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+## Props
|
|
|
|
|
+
|
|
|
|
|
+| 属性 | 类型 | 默认值 | 说明 |
|
|
|
|
|
+|------|------|--------|------|
|
|
|
|
|
+| `multiple` | Boolean | `false` | 是否支持多文件上传 |
|
|
|
|
|
+| `accept` | String | `'image/*,video/*'` | 接受的文件类型 |
|
|
|
|
|
+| `maxSize` | Number | `10 * 1024 * 1024` | 最大文件大小（字节） |
|
|
|
|
|
+
|
|
|
|
|
+## Events
|
|
|
|
|
+
|
|
|
|
|
+| 事件名 | 参数 | 说明 |
|
|
|
|
|
+|--------|------|------|
|
|
|
|
|
+| `upload` | `previews: Array` | 文件上传成功时触发 |
|
|
|
|
|
+| `error` | `error: String` | 上传错误时触发 |
|
|
|
|
|
+
|
|
|
|
|
+## 预览对象结构
|
|
|
|
|
+
|
|
|
|
|
+```javascript
|
|
|
|
|
+{
|
|
|
|
|
+ file: File, // 原始文件对象
|
|
|
|
|
+ type: 'image' | 'video', // 文件类型
|
|
|
|
|
+ url: String, // 预览URL
|
|
|
|
|
+ name: String, // 文件名
|
|
|
|
|
+ size: Number // 文件大小
|
|
|
|
|
+}
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+## 自定义提示
|
|
|
|
|
+
|
|
|
|
|
+```vue
|
|
|
|
|
+<ImageWithVideo :multiple="true">
|
|
|
|
|
+ <template #prompt>
|
|
|
|
|
+ <div class="custom-prompt">
|
|
|
|
|
+ <div class="icon">📁</div>
|
|
|
|
|
+ <p>点击选择文件</p>
|
|
|
|
|
+ <p class="hint">支持图片和视频</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+</ImageWithVideo>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+## 样式定制
|
|
|
|
|
+
|
|
|
|
|
+组件使用 CSS Grid 布局，支持响应式设计：
|
|
|
|
|
+
|
|
|
|
|
+- 桌面端：最小 150px 宽度的网格
|
|
|
|
|
+- 移动端：最小 120px 宽度的网格
|
|
|
|
|
+- 自动填充列数，保持正方形比例
|
|
|
|
|
+
|
|
|
|
|
+## 浏览器兼容性
|
|
|
|
|
+
|
|
|
|
|
+- Chrome 60+
|
|
|
|
|
+- Firefox 55+
|
|
|
|
|
+- Safari 12+
|
|
|
|
|
+- Edge 79+
|
|
|
|
|
+
|
|
|
|
|
+## 注意事项
|
|
|
|
|
+
|
|
|
|
|
+1. 视频缩略图生成需要浏览器支持 Canvas API
|
|
|
|
|
+2. 文件大小限制建议根据实际需求调整
|
|
|
|
|
+3. 拖拽上传功能需要现代浏览器支持
|
|
|
|
|
+4. 组件会自动处理文件类型验证和大小检查
|
