1
src/
2
├── services/api/upload.ts      # 文件上传API服务
3
├── utils/upload.ts             # 文件上传工具
4
├── utils/file.ts               # 文件处理工具
5
├── types/upload.ts             # 上传类型定义
6
└── components/FileUploader/    # 文件上传组件
7
    ├── FileUploader.vue       # 文件上传器
8
    ├── ImageUploader.vue       # 图片上传器
9
    └── DocumentUploader.vue    # 文档上传器

1
// 文件类型枚举
2
const FileType = {
3
  IMAGE: 'image',           // 图片
4
  DOCUMENT: 'document',    // 文档
5
  AUDIO: 'audio',          // 音频
6
  VIDEO: 'video',          // 视频
7
  OTHER: 'other'          // 其他
8
} as const
9

10
type FileType = typeof FileType[keyof typeof FileType]
11

12
// 文件类型配置
13
interface FileTypeConfig {
14
  type: FileType;
15
  name: string;
16
  extensions: string[];
17
  maxSize: number;          // 最大文件大小（字节）
18
  mimeTypes: string[];
19
  icon: string;
20
}
21

22
// 文件类型配置映射
23
const FILE_TYPE_CONFIGS: Record<FileType, FileTypeConfig> = {
24
  [FileType.IMAGE]: {
25
    type: FileType.IMAGE,
26
    name: '图片',
27
    extensions: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'],
28
    maxSize: 5 * 1024 * 1024, // 5MB
29
    mimeTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'],
30
    icon: 'i-mdi-image'
31
  },
32
  [FileType.DOCUMENT]: {
33
    type: FileType.DOCUMENT,
34
    name: '文档',
35
    extensions: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'],
36
    maxSize: 10 * 1024 * 1024, // 10MB
37
    mimeTypes: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
38
    icon: 'i-mdi-file-document'
39
  },
40
  [FileType.AUDIO]: {
41
    type: FileType.AUDIO,
42
    name: '音频',
43
    extensions: ['mp3', 'wav', 'aac', 'ogg'],
44
    maxSize: 20 * 1024 * 1024, // 20MB
45
    mimeTypes: ['audio/mpeg', 'audio/wav', 'audio/aac', 'audio/ogg'],
46
    icon: 'i-mdi-music'
47
  },
48
  [FileType.VIDEO]: {
49
    type: FileType.VIDEO,
50
    name: '视频',
51
    extensions: ['mp4', 'avi', 'mov', 'wmv'],
52
    maxSize: 50 * 1024 * 1024, // 50MB
53
    mimeTypes: ['video/mp4', 'video/avi', 'video/quicktime', 'video/x-ms-wmv'],
54
    icon: 'i-mdi-video'
55
  },
56
  [FileType.OTHER]: {
57
    type: FileType.OTHER,
58
    name: '其他',
59
    extensions: [],
60
    maxSize: 5 * 1024 * 1024, // 5MB
61
    mimeTypes: [],
62
    icon: 'i-mdi-file'
63
  }
64
}

1
// 文件上传请求
2
interface UploadRequest {
3
  file: File;
4
  type: FileType;
5
  category?: string;        // 文件分类
6
  metadata?: Record<string, any>; // 文件元数据
7
}
8

9
// 文件上传响应
10
interface UploadResponse {
11
  url: string;              // 文件访问URL
12
  filename: string;         // 文件名
13
  size: number;            // 文件大小
14
  type: FileType;          // 文件类型
15
  mimeType: string;        // MIME类型
16
  uploadedAt: number;       // 上传时间
17
}
18

19
// 文件上传服务
20
export const uploadService = {
21
  // 上传单个文件
22
  async uploadFile(request: UploadRequest): Promise<UploadResponse> {
23
    // 验证文件
24
    const validation = this.validateFile(request.file, request.type)
25
    if (!validation.isValid) {
26
      throw new Error(validation.errors.join(', '))
27
    }
28

29
    // 处理文件
30
    const processedFile = await this.processFile(request.file, request.type)
31

32
    // 上传到OSS
33
    const response = await uploadApi.uploadFile({
34
      file: processedFile,
35
      type: request.type,
36
      category: request.category,
37
      metadata: request.metadata
38
    })
39

40
    return response.data
41
  },
42

43
  // 批量上传文件
44
  async uploadFiles(requests: UploadRequest[]): Promise<UploadResponse[]> {
45
    const results: UploadResponse[] = []
46
    const errors: string[] = []
47

48
    for (const request of requests) {
49
      try {
50
        const result = await this.uploadFile(request)
51
        results.push(result)
52
      } catch (error) {
53
        errors.push(`${request.file.name}: ${error.message}`)
54
      }
55
    }
56

57
    if (errors.length > 0) {
58
      console.warn('部分文件上传失败:', errors)
59
    }
60

61
    return results
62
  },
63

64
  // 验证文件
65
  validateFile(file: File, type: FileType): ValidationResult {
66
    const config = FILE_TYPE_CONFIGS[type]
67
    const errors: string[] = []
68

69
    // 检查文件大小
70
    if (file.size > config.maxSize) {
71
      errors.push(`文件大小不能超过${this.formatFileSize(config.maxSize)}`)
72
    }
73

74
    // 检查文件类型
75
    if (config.mimeTypes.length > 0 && !config.mimeTypes.includes(file.type)) {
76
      errors.push(`不支持的文件类型: ${file.type}`)
77
    }
78

79
    // 检查文件扩展名
80
    const extension = this.getFileExtension(file.name)
81
    if (config.extensions.length > 0 && !config.extensions.includes(extension)) {
82
      errors.push(`不支持的文件扩展名: ${extension}`)
83
    }
84

85
    return {
86
      isValid: errors.length === 0,
87
      errors
88
    }
89
  },
90

91
  // 处理文件
92
  async processFile(file: File, type: FileType): Promise<File> {
93
    if (type === FileType.IMAGE) {
94
      return await this.compressImage(file)
95
    }
96
    return file
97
  },
98

99
  // 压缩图片
100
  async compressImage(file: File, quality: number = 0.8): Promise<File> {
101
    return new Promise((resolve, reject) => {
102
      const canvas = document.createElement('canvas')
103
      const ctx = canvas.getContext('2d')
104
      const img = new Image()
105

106
      img.onload = () => {
107
        // 计算压缩后的尺寸
108
        const maxWidth = 1920
109
        const maxHeight = 1080
110
        let { width, height } = img
111

112
        if (width > maxWidth || height > maxHeight) {
113
          const ratio = Math.min(maxWidth / width, maxHeight / height)
114
          width *= ratio
115
          height *= ratio
116
        }
117

118
        canvas.width = width
119
        canvas.height = height
120

121
        // 绘制压缩后的图片
122
        ctx?.drawImage(img, 0, 0, width, height)
123

124
        canvas.toBlob(
125
          (blob) => {
126
            if (blob) {
127
              const compressedFile = new File([blob], file.name, {
128
                type: file.type,
129
                lastModified: Date.now()
130
              })
131
              resolve(compressedFile)
132
            } else {
133
              reject(new Error('图片压缩失败'))
134
            }
135
          },
136
          file.type,
137
          quality
138
        )
139
      }
140

141
      img.onerror = () => reject(new Error('图片加载失败'))
142
      img.src = URL.createObjectURL(file)
143
    })
144
  },
145

146
  // 获取文件扩展名
147
  getFileExtension(filename: string): string {
148
    return filename.split('.').pop()?.toLowerCase() || ''
149
  },
150

151
  // 格式化文件大小
152
  formatFileSize(bytes: number): string {
153
    if (bytes === 0) return '0 Bytes'
154

155
    const k = 1024
156
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
157
    const i = Math.floor(Math.log(bytes) / Math.log(k))
158

159
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
160
  }
161
}

1
// 文件预览服务
2
export const previewService = {
3
  // 获取文件预览URL
4
  getPreviewUrl(fileUrl: string, type: FileType): string {
5
    switch (type) {
6
      case FileType.IMAGE:
7
        return fileUrl
8
      case FileType.DOCUMENT:
9
        return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`
10
      case FileType.VIDEO:
11
        return fileUrl
12
      case FileType.AUDIO:
13
        return fileUrl
14
      default:
15
        return fileUrl
16
    }
17
  },
18

19
  // 检查是否支持预览
20
  isPreviewSupported(type: FileType): boolean {
21
    return [FileType.IMAGE, FileType.DOCUMENT, FileType.VIDEO, FileType.AUDIO].includes(type)
22
  },
23

24
  // 获取文件类型
25
  getFileType(filename: string): FileType {
26
    const extension = this.getFileExtension(filename)
27

28
    for (const [type, config] of Object.entries(FILE_TYPE_CONFIGS)) {
29
      if (config.extensions.includes(extension)) {
30
        return type as FileType
31
      }
32
    }
33

34
    return FileType.OTHER
35
  },
36

37
  // 获取文件图标
38
  getFileIcon(type: FileType): string {
39
    return FILE_TYPE_CONFIGS[type].icon
40
  }
41
}

1
// 文件管理服务
2
export const fileManagerService = {
3
  // 获取文件列表
4
  async getFileList(params: FileListRequest): Promise<FileListResponse> {
5
    const response = await uploadApi.getFileList(params)
6
    return response.data
7
  },
8

9
  // 删除文件
10
  async deleteFile(fileId: string): Promise<void> {
11
    const response = await uploadApi.deleteFile(fileId)
12
    if (response.code !== 200) {
13
      throw new Error(response.message)
14
    }
15
  },
16

17
  // 更新文件信息
18
  async updateFileInfo(fileId: string, data: Partial<FileInfo>): Promise<FileInfo> {
19
    const response = await uploadApi.updateFileInfo(fileId, data)
20
    return response.data
21
  },
22

23
  // 获取文件信息
24
  async getFileInfo(fileId: string): Promise<FileInfo> {
25
    const response = await uploadApi.getFileInfo(fileId)
26
    return response.data
27
  }
28
}
29

30
// 文件信息接口
31
interface FileInfo {
32
  id: string;
33
  filename: string;
34
  url: string;
35
  type: FileType;
36
  size: number;
37
  mimeType: string;
38
  category?: string;
39
  metadata?: Record<string, any>;
40
  uploadedAt: number;
41
  updatedAt: number;
42
}

1
<template>
2
  <view class="file-uploader">
3
    <!-- 上传区域 -->
4
    <view
5
      class="upload-area"
6
      :class="{
7
        'upload-area--dragover': isDragOver,
8
        'upload-area--disabled': disabled
9
      }"
10
      @click="openFileDialog"
11
      @dragover="handleDragOver"
12
      @dragleave="handleDragLeave"
13
      @drop="handleDrop"
14
    >
15
      <view class="upload-content">
16
        <Iconify :icon="uploadIcon" size="48" />
17
        <text class="upload-text">{{ uploadText }}</text>
18
        <text class="upload-hint">{{ uploadHint }}</text>
19
      </view>
20
    </view>
21

22
    <!-- 文件列表 -->
23
    <view class="file-list" v-if="fileList.length > 0">
24
      <view
25
        v-for="(file, index) in fileList"
26
        :key="file.id || index"
27
        class="file-item"
28
      >
29
        <view class="file-info">
30
          <Iconify :icon="getFileIcon(file)" size="20" />
31
          <view class="file-details">
32
            <text class="file-name">{{ file.name }}</text>
33
            <text class="file-size">{{ formatFileSize(file.size) }}</text>
34
          </view>
35
        </view>
36

37
        <view class="file-actions">
38
          <view class="progress" v-if="file.uploading">
39
            <view class="progress-bar" :style="{ width: file.progress + '%' }"></view>
40
          </view>
41
          <view class="action-buttons" v-else>
42
            <button class="btn-icon" @click="previewFile(file)">
43
              <Iconify icon="i-mdi-eye" size="16" />
44
            </button>
45
            <button class="btn-icon" @click="removeFile(index)">
46
              <Iconify icon="i-mdi-delete" size="16" />
47
            </button>
48
          </view>
49
        </view>
50
      </view>
51
    </view>
52

53
    <!-- 隐藏的文件输入 -->
54
    <input
55
      ref="fileInput"
56
      type="file"
57
      :multiple="multiple"
58
      :accept="accept"
59
      @change="handleFileSelect"
60
      style="display: none"
61
    />
62
  </view>
63
</template>
64

65
<script setup lang="ts">
66
interface Props {
67
  type: FileType;
68
  multiple?: boolean;
69
  maxFiles?: number;
70
  disabled?: boolean;
71
  category?: string;
72
}
73

74
interface Emits {
75
  upload: [files: UploadResponse[]];
76
  error: [error: string];
77
  progress: [progress: number];
78
}
79

80
const props = withDefaults(defineProps<Props>(), {
81
  multiple: false,
82
  maxFiles: 10,
83
  disabled: false
84
})
85

86
const emit = defineEmits<Emits>()
87

88
// 响应式数据
89
const fileList = ref<FileItem[]>([])
90
const isDragOver = ref(false)
91
const uploading = ref(false)
92

93
// 计算属性
94
const uploadIcon = computed(() => {
95
  const config = FILE_TYPE_CONFIGS[props.type]
96
  return config.icon
97
})
98

99
const uploadText = computed(() => {
100
  if (uploading.value) return '上传中...'
101
  if (props.disabled) return '上传已禁用'
102
  return `点击或拖拽上传${FILE_TYPE_CONFIGS[props.type].name}`
103
})
104

105
const uploadHint = computed(() => {
106
  const config = FILE_TYPE_CONFIGS[props.type]
107
  return `支持 ${config.extensions.join(', ')} 格式，最大 ${formatFileSize(config.maxSize)}`
108
})
109

110
const accept = computed(() => {
111
  const config = FILE_TYPE_CONFIGS[props.type]
112
  return config.mimeTypes.join(',')
113
})
114

115
// 文件项接口
116
interface FileItem {
117
  id?: string;
118
  name: string;
119
  size: number;
120
  file?: File;
121
  uploading?: boolean;
122
  progress?: number;
123
  url?: string;
124
  error?: string;
125
}
126

127
// 打开文件选择对话框
128
function openFileDialog() {
129
  if (props.disabled) return
130
  fileInput.value?.click()
131
}
132

133
// 处理文件选择
134
async function handleFileSelect(event: Event) {
135
  const target = event.target as HTMLInputElement
136
  const files = Array.from(target.files || [])
137

138
  if (files.length === 0) return
139

140
  await processFiles(files)
141

142
  // 清空input
143
  target.value = ''
144
}
145

146
// 处理拖拽
147
function handleDragOver(event: DragEvent) {
148
  event.preventDefault()
149
  isDragOver.value = true
150
}
151

152
function handleDragLeave(event: DragEvent) {
153
  event.preventDefault()
154
  isDragOver.value = false
155
}
156

157
async function handleDrop(event: DragEvent) {
158
  event.preventDefault()
159
  isDragOver.value = false
160

161
  if (props.disabled) return
162

163
  const files = Array.from(event.dataTransfer?.files || [])
164
  if (files.length > 0) {
165
    await processFiles(files)
166
  }
167
}
168

169
// 处理文件
170
async function processFiles(files: File[]) {
171
  // 检查文件数量限制
172
  if (fileList.value.length + files.length > props.maxFiles) {
173
    emit('error', `最多只能上传${props.maxFiles}个文件`)
174
    return
175
  }
176

177
  // 添加文件到列表
178
  const newFiles: FileItem[] = files.map(file => ({
179
    name: file.name,
180
    size: file.size,
181
    file,
182
    uploading: true,
183
    progress: 0
184
  }))
185

186
  fileList.value.push(...newFiles)
187

188
  // 开始上传
189
  uploading.value = true
190
  const uploadResults: UploadResponse[] = []
191

192
  try {
193
    for (let i = 0; i < newFiles.length; i++) {
194
      const fileItem = newFiles[i]
195
      const fileIndex = fileList.value.findIndex(item => item === fileItem)
196

197
      try {
198
        const result = await uploadService.uploadFile({
199
          file: fileItem.file!,
200
          type: props.type,
201
          category: props.category
202
        })
203

204
        // 更新文件项
205
        fileList.value[fileIndex] = {
206
          ...fileItem,
207
          id: result.filename,
208
          url: result.url,
209
          uploading: false,
210
          progress: 100
211
        }
212

213
        uploadResults.push(result)
214
      } catch (error) {
215
        // 标记上传失败
216
        fileList.value[fileIndex] = {
217
          ...fileItem,
218
          uploading: false,
219
          error: error.message
220
        }
221
      }
222
    }
223

224
    if (uploadResults.length > 0) {
225
      emit('upload', uploadResults)
226
    }
227
  } finally {
228
    uploading.value = false
229
  }
230
}
231

232
// 移除文件
233
function removeFile(index: number) {
234
  fileList.value.splice(index, 1)
235
}
236

237
// 预览文件
238
function previewFile(file: FileItem) {
239
  if (file.url) {
240
    uni.previewImage({
241
      urls: [file.url],
242
      current: file.url
243
    })
244
  }
245
}
246
</script>

1
<template>
2
  <view class="image-uploader">
3
    <!-- 图片网格 -->
4
    <view class="image-grid">
5
      <view
6
        v-for="(image, index) in imageList"
7
        :key="image.id || index"
8
        class="image-item"
9
      >
10
        <image
11
          :src="image.url || image.preview"
12
          class="image"
13
          mode="aspectFill"
14
          @click="previewImage(index)"
15
        />
16

17
        <view class="image-overlay" v-if="image.uploading">
18
          <view class="progress">
19
            <view class="progress-text">{{ image.progress }}%</view>
20
          </view>
21
        </view>
22

23
        <view class="image-actions">
24
          <button class="btn-icon" @click="removeImage(index)">
25
            <Iconify icon="i-mdi-delete" size="16" />
26
          </button>
27
        </view>
28
      </view>
29

30
      <!-- 添加按钮 -->
31
      <view
32
        class="add-button"
33
        @click="openImagePicker"
34
        v-if="imageList.length < maxImages"
35
      >
36
        <Iconify icon="i-mdi-plus" size="24" />
37
        <text>添加图片</text>
38
      </view>
39
    </view>
40
  </view>
41
</template>
42

43
<script setup lang="ts">
44
interface Props {
45
  maxImages?: number;
46
  category?: string;
47
}
48

49
interface Emits {
50
  upload: [images: UploadResponse[]];
51
  error: [error: string];
52
}
53

54
const props = withDefaults(defineProps<Props>(), {
55
  maxImages: 9
56
})
57

58
const emit = defineEmits<Emits>()
59

60
const imageList = ref<ImageItem[]>([])
61

62
interface ImageItem {
63
  id?: string;
64
  url?: string;
65
  preview?: string;
66
  uploading?: boolean;
67
  progress?: number;
68
  error?: string;
69
}
70

71
// 打开图片选择器
72
function openImagePicker() {
73
  uni.chooseImage({
74
    count: props.maxImages - imageList.value.length,
75
    sizeType: ['compressed'],
76
    sourceType: ['album', 'camera'],
77
    success: (res) => {
78
      processImages(res.tempFilePaths)
79
    }
80
  })
81
}
82

83
// 处理图片
84
async function processImages(tempFilePaths: string[]) {
85
  for (const tempFilePath of tempFilePaths) {
86
    const imageItem: ImageItem = {
87
      preview: tempFilePath,
88
      uploading: true,
89
      progress: 0
90
    }
91

92
    imageList.value.push(imageItem)
93

94
    try {
95
      // 上传图片
96
      const result = await uploadService.uploadFile({
97
        file: tempFilePath as any, // 小程序环境下的文件对象
98
        type: FileType.IMAGE,
99
        category: props.category
100
      })
101

102
      // 更新图片项
103
      const index = imageList.value.findIndex(item => item === imageItem)
104
      imageList.value[index] = {
105
        ...imageItem,
106
        id: result.filename,
107
        url: result.url,
108
        uploading: false,
109
        progress: 100
110
      }
111
    } catch (error) {
112
      // 标记上传失败
113
      const index = imageList.value.findIndex(item => item === imageItem)
114
      imageList.value[index] = {
115
        ...imageItem,
116
        uploading: false,
117
        error: error.message
118
      }
119
    }
120
  }
121
}
122

123
// 预览图片
124
function previewImage(index: number) {
125
  const urls = imageList.value
126
    .filter(img => img.url)
127
    .map(img => img.url!)
128

129
  uni.previewImage({
130
    urls,
131
    current: urls[index]
132
  })
133
}
134

135
// 移除图片
136
function removeImage(index: number) {
137
  imageList.value.splice(index, 1)
138
}
139
</script>

1
// 文件上传状态管理
2
export const useUploadStore = defineStore('upload', () => {
3
  // 状态
4
  const uploadQueue = ref<UploadTask[]>([])
5
  const uploadHistory = ref<UploadResponse[]>([])
6
  const isUploading = ref(false)
7

8
  // 计算属性
9
  const totalProgress = computed(() => {
10
    if (uploadQueue.value.length === 0) return 0
11

12
    const totalProgress = uploadQueue.value.reduce((sum, task) => sum + task.progress, 0)
13
    return totalProgress / uploadQueue.value.length
14
  })
15

16
  const completedTasks = computed(() =>
17
    uploadQueue.value.filter(task => task.status === 'completed')
18
  )
19

20
  const failedTasks = computed(() =>
21
    uploadQueue.value.filter(task => task.status === 'failed')
22
  )
23

24
  // 操作
25
  const addUploadTask = (task: UploadTask): void => {
26
    uploadQueue.value.push(task)
27
  }
28

29
  const removeUploadTask = (taskId: string): void => {
30
    uploadQueue.value = uploadQueue.value.filter(task => task.id !== taskId)
31
  }
32

33
  const updateTaskProgress = (taskId: string, progress: number): void => {
34
    const task = uploadQueue.value.find(task => task.id === taskId)
35
    if (task) {
36
      task.progress = progress
37
    }
38
  }
39

40
  const updateTaskStatus = (taskId: string, status: UploadTaskStatus): void => {
41
    const task = uploadQueue.value.find(task => task.id === taskId)
42
    if (task) {
43
      task.status = status
44
    }
45
  }
46

47
  const clearCompletedTasks = (): void => {
48
    uploadQueue.value = uploadQueue.value.filter(task => task.status !== 'completed')
49
  }
50

51
  const addToHistory = (response: UploadResponse): void => {
52
    uploadHistory.value.unshift(response)
53

54
    // 限制历史记录数量
55
    if (uploadHistory.value.length > 100) {
56
      uploadHistory.value = uploadHistory.value.slice(0, 100)
57
    }
58
  }
59

60
  return {
61
    uploadQueue,
62
    uploadHistory,
63
    isUploading,
64
    totalProgress,
65
    completedTasks,
66
    failedTasks,
67
    addUploadTask,
68
    removeUploadTask,
69
    updateTaskProgress,
70
    updateTaskStatus,
71
    clearCompletedTasks,
72
    addToHistory
73
  }
74
})
75

76
// 上传任务接口
77
interface UploadTask {
78
  id: string;
79
  file: File;
80
  type: FileType;
81
  category?: string;
82
  progress: number;
83
  status: 'pending' | 'uploading' | 'completed' | 'failed';
84
  error?: string;
85
  result?: UploadResponse;
86
}