iOS开发：根据用户类型实现Collection View动态单元格并完成图片上传功能

Hey there! Let's fix your image upload functionality step by step. The core issues are linking each cell's button to the ImagePicker, displaying the selected image in the correct cell, and managing Base64 data for dynamic cell counts. Here's how to do it:

1. Update Your Collection View Cell Class (DocumentCollectionViewCell) #

First, let's add a closure to your cell class so we can pass the cell's index back to the ViewController when the upload button is tapped. This avoids messy tag-based approaches which can break with cell reuse.

import UIKit

class DocumentCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var userPic: UIImageView!
    @IBOutlet weak var uploadButton: UIButton!
    
    // Closure to notify when button is tapped, passes the cell's row index
    var onUploadTapped: ((Int) -> Void)?
    
    override func awakeFromNib() {
        super.awakeFromNib()
        uploadButton.addTarget(self, action: #selector(uploadButtonTapped), for: .touchUpInside)
    }
    
    @objc private func uploadButtonTapped() {
        // Trigger the closure and pass the cell's row (we'll set this in cellForItemAt)
        onUploadTapped?(tag)
    }
}

2. Add State Management in Your ViewController #

We need to track two critical pieces of state:

• Which cell was tapped (to update the right image)
• The Base64 data for each cell (since cell counts vary by user type)

Add these properties to your ViewController:

// Track the tapped cell's row index
private var selectedCellRow: Int?
// Store Base64 strings for each cell (nil = no image uploaded yet)
private var imageBase64Array: [String?] = []

Initialize the imageBase64Array based on the user type (run this when typeOfUser is set or in viewDidLoad):

private func setupImageBase64Array() {
    imageBase64Array.removeAll()
    if typeOfUser == "2" {
        // 3 empty slots for user type 2
        imageBase64Array = Array(repeating: nil, count: 3)
    } else {
        // 2 empty slots for user types 1 and 3
        imageBase64Array = Array(repeating: nil, count: 2)
    }
    // Reload collection view to reflect changes if needed
    collectionView.reloadData()
}

3. Fix the Collection View Data Source Methods #

Update cellForItemAt to link the cell's button to your ViewController logic, and populate the image view using stored Base64 data:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! DocumentCollectionViewCell
    
    // Set the cell's tag to its row index (used in the button tap closure)
    cell.tag = indexPath.row
    
    // Configure the image view: load from Base64 if available, else use placeholder
    if let base64String = imageBase64Array[indexPath.row] {
        if let imageData = Data(base64Encoded: base64String), let image = UIImage(data: imageData) {
            cell.userPic.image = image
        }
    } else {
        // Clear or set a placeholder for empty state
        cell.userPic.image = UIImage(named: "empty-placeholder") ?? nil
    }
    
    // Link the cell's upload button tap to our ImagePicker trigger
    cell.onUploadTapped = { [weak self] row in
        guard let self = self else { return }
        self.selectedCellRow = row
        self.openImagePicker()
    }
    
    return cell
}

4. Update Your ImagePicker Delegate to Handle Dynamic Cells #

Modify your existing UIImagePickerControllerDelegate methods to save the image to the correct cell and store its Base64 data:

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    picker.dismiss(animated: true)
    
    guard let selectedRow = selectedCellRow,
          let image = info[.originalImage] as? UIImage else {
        return
    }
    
    // Convert image to Base64 and save to our array
    if let imageData = image.jpegData(compressionQuality: 0.6) {
        let base64String = imageData.base64EncodedString(options: .lineLength64Characters)
        imageBase64Array[selectedRow] = base64String
    }
    
    // Reload only the affected cell to show the new image
    if let indexPath = IndexPath(row: selectedRow, section: 0) {
        collectionView.reloadItems(at: [indexPath])
    }
    
    // Reset selected cell tracking
    selectedCellRow = nil
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    picker.dismiss(animated: true)
    selectedCellRow = nil
}

// Helper method to open the ImagePicker (use your existing setup here)
private func openImagePicker() {
    let imagePicker = UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType = .photoLibrary
    present(imagePicker, animated: true)
}

Key Notes to Avoid Issues #

• Cell Reuse: By using imageBase64Array to populate each cell's image, we ensure reused cells always show the correct data, no matter how the collection view scrolls.
• Dynamic Cell Counts: The setupImageBase64Array method initializes the array with the right length for each user type, eliminating index-out-of-bounds errors.
• Clean Button Handling: Closures are more reliable than button tags for linking cell actions to the ViewController, especially with collection view reuse.

内容的提问来源于stack exchange，提问作者Mel