163 lines
7.4 KiB
Swift
163 lines
7.4 KiB
Swift
import SwiftUI
|
|
import PhotosUI
|
|
|
|
struct MultiImageUploadExampleView: View {
|
|
@State private var isImagePickerPresented = false
|
|
@State private var selectedImages: [UIImage]? = []
|
|
@State private var uploadResults: [UploadResult] = []
|
|
@State private var showAlert = false
|
|
@State private var alertMessage = ""
|
|
|
|
var body: some View {
|
|
ScrollView {
|
|
VStack(spacing: 20) {
|
|
// Custom upload button with image count
|
|
MultiImageUploader(
|
|
maxSelection: 10,
|
|
isImagePickerPresented: $isImagePickerPresented,
|
|
selectedImagesBinding: $selectedImages,
|
|
content: { isUploading, count in
|
|
VStack(spacing: 8) {
|
|
Image(systemName: "photo.stack")
|
|
.font(.system(size: 24))
|
|
|
|
if isUploading {
|
|
ProgressView()
|
|
.padding(.vertical, 4)
|
|
Text("上传中...")
|
|
.font(.subheadline)
|
|
} else {
|
|
Text(count > 0 ? "已选择 \(count) 张图片" : "选择图片")
|
|
.font(.headline)
|
|
Text("最多可选择10张图片")
|
|
.font(.caption)
|
|
.foregroundColor(.secondary)
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity)
|
|
.padding()
|
|
.background(Color.blue.opacity(0.1))
|
|
.cornerRadius(12)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 12)
|
|
.stroke(Color.blue, lineWidth: 1)
|
|
)
|
|
},
|
|
onUploadComplete: handleUploadComplete
|
|
)
|
|
.padding(.horizontal)
|
|
.padding(.top, 20)
|
|
|
|
// Selected images preview with progress
|
|
if let images = selectedImages, !images.isEmpty {
|
|
VStack(alignment: .leading, spacing: 12) {
|
|
Text("已选择图片")
|
|
.font(.headline)
|
|
.padding(.horizontal)
|
|
|
|
LazyVGrid(columns: [
|
|
GridItem(.flexible(), spacing: 8),
|
|
GridItem(.flexible(), spacing: 8),
|
|
GridItem(.flexible(), spacing: 8)
|
|
], spacing: 8) {
|
|
ForEach(Array(images.enumerated()), id: \.offset) { index, image in
|
|
ZStack(alignment: .topTrailing) {
|
|
Image(uiImage: image)
|
|
.resizable()
|
|
.scaledToFill()
|
|
.frame(height: 100)
|
|
.clipped()
|
|
.cornerRadius(8)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 8)
|
|
.stroke(Color.gray.opacity(0.3), lineWidth: 1)
|
|
)
|
|
|
|
// Upload progress indicator
|
|
if index < uploadResults.count {
|
|
let result = uploadResults[index]
|
|
VStack {
|
|
Spacer()
|
|
ZStack(alignment: .leading) {
|
|
Rectangle()
|
|
.fill(Color.gray.opacity(0.2))
|
|
.frame(height: 4)
|
|
|
|
if case .uploading(let progress) = result.status {
|
|
Rectangle()
|
|
.fill(Color.blue)
|
|
.frame(width: CGFloat(progress) * 100, height: 4)
|
|
} else if case .success = result.status {
|
|
Rectangle()
|
|
.fill(Color.green)
|
|
.frame(height: 4)
|
|
} else if case .failure = result.status {
|
|
Rectangle()
|
|
.fill(Color.red)
|
|
.frame(height: 4)
|
|
}
|
|
}
|
|
.cornerRadius(2)
|
|
.padding(.horizontal, 2)
|
|
.padding(.bottom, 2)
|
|
}
|
|
.frame(height: 20)
|
|
}
|
|
|
|
// Status indicator
|
|
if index < uploadResults.count {
|
|
let result = uploadResults[index]
|
|
Circle()
|
|
.fill(statusColor(for: result.status))
|
|
.frame(width: 12, height: 12)
|
|
.padding(4)
|
|
.background(Circle().fill(Color.white))
|
|
.padding(4)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.padding(.horizontal)
|
|
}
|
|
}
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
.navigationTitle("多图上传示例")
|
|
.alert(isPresented: $showAlert) {
|
|
Alert(title: Text("上传结果"), message: Text(alertMessage), dismissButton: .default(Text("确定")))
|
|
}
|
|
}
|
|
|
|
private func handleUploadComplete(_ results: [UploadResult]) {
|
|
self.uploadResults = results
|
|
let successCount = results.filter {
|
|
if case .success = $0.status { return true }
|
|
return false
|
|
}.count
|
|
|
|
alertMessage = "上传完成！共 \(results.count) 张图片，成功 \(successCount) 张"
|
|
showAlert = true
|
|
}
|
|
|
|
private func statusColor(for status: UploadStatus) -> Color {
|
|
switch status {
|
|
case .uploading:
|
|
return .blue
|
|
case .success:
|
|
return .green
|
|
case .failure:
|
|
return .red
|
|
default:
|
|
return .gray
|
|
}
|
|
}
|
|
}
|
|
|
|
#Preview {
|
|
NavigationView {
|
|
MultiImageUploadExampleView()
|
|
}
|
|
}
|