Android Kotlin：基于Firestore实现仿Ins帖子的图片上传与展示

Got it, let's break down the best way to add image upload and display to your existing Instagram-style post feature—all while keeping your current code intact. Here's a step-by-step approach that ties everything together with Firebase Storage and Firestore, using either Glide or Picasso for smooth image rendering:

First, we need to add an imageUrl field to store the Firebase Storage download link for the post image. Make it nullable so you can still support text-only posts if needed:

data class Post(
    val username: String,
    val timestamp: Date,
    val postTxt: String,
    val numLikes: Int,
    val numComments: Int,
    val documentId: String,
    val imageUrl: String? = null // Optional for text-only posts
)

Don't forget to add a constant for the Firestore field key, like:

const val IMAGE_URL = "imageUrl"

Since you already have code to load local images into an ImageView, you should have access to the selected image's Uri. We'll upload this image to Storage first, grab its download URL, then save that URL alongside your existing post data in Firestore.

Here's the complete upload function:

private fun uploadPostWithImage(imageUri: Uri, username: String, postTxt: String) {
    // Create a unique filename to avoid overwriting existing images
    val uniqueImageName = "post_images/${UUID.randomUUID()}.jpg"
    val storageRef = FirebaseStorage.getInstance().reference.child(uniqueImageName)

    // Upload the image to Firebase Storage
    storageRef.putFile(imageUri)
        .addOnSuccessListener {
            // Get the public download URL for the image
            storageRef.downloadUrl.addOnSuccessListener { downloadUri ->
                // Build your post data with the new image URL
                val postData = hashMapOf(
                    NUM_LIKES to 0,
                    NUM_COMMENTS to 0,
                    POST_TXT to postTxt,
                    TIMESTAMP to FieldValue.serverTimestamp(),
                    USERNAME to username,
                    IMAGE_URL to downloadUri.toString() // Add the image URL here
                )

                // Save to Firestore (reuse your existing upload logic!)
                FirebaseFirestore.getInstance().collection(POST_REF)
                    .add(postData)
                    .addOnSuccessListener { finish() }
                    .addOnFailureListener {
                        Log.e("Exception", "Could not add post: $it")
                        toast("Could not add post")
                    }
            }
        }
        .addOnFailureListener {
            Log.e("Exception", "Image upload failed: $it")
            toast("Image upload failed")
        }
}

When the user taps "Post," check if an image was selected: if yes, call this function; if no, use your original text-only upload logic.

Modify your existing snapshot parsing to include the imageUrl field:

posts.clear()
snapshot.documents.forEach { document ->
    val data = document.data
    val name = data?.get(USERNAME) as String
    val timestamp = data[TIMESTAMP] as Date
    val postTxt = data[POST_TXT] as String
    val numLikes = data[NUM_LIKES] as Long
    val numComments = data[NUM_COMMENTS] as Long
    val documentId = document.id
    val imageUrl = data[IMAGE_URL] as? String // Pull the image URL (nullable)

    val newPost = Post(name, timestamp, postTxt, numLikes.toInt(), numComments.toInt(), documentId, imageUrl)
    posts.add(newPost)
}
postsAdapter.notifyDataSetChanged()

Now use either Glide or Picasso to load images from the imageUrl into your ImageView. Both handle caching, resizing, and error handling out of the box—Glide is generally preferred for better performance with RecyclerViews.

Option 1: Using Glide #

First add the dependency to your build.gradle (Module level):

implementation 'com.github.bumptech.glide:glide:4.16.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'

Then in your RecyclerView Adapter's onBindViewHolder:

override fun onBindViewHolder(holder: PostViewHolder, position: Int) {
    val post = posts[position]
    holder.usernameTxt.text = post.username
    holder.postTxt.text = post.postTxt
    holder.likesCount.text = post.numLikes.toString()
    holder.commentsCount.text = post.numComments.toString()

    // Handle image display
    val postImageView = holder.postImageView
    if (!post.imageUrl.isNullOrEmpty()) {
        Glide.with(postImageView.context)
            .load(post.imageUrl)
            .placeholder(R.drawable.placeholder_post) // Optional: show while loading
            .error(R.drawable.error_post) // Optional: show if load fails
            .centerCrop() // Match Instagram's image styling
            .into(postImageView)
        postImageView.visibility = View.VISIBLE
    } else {
        postImageView.visibility = View.GONE // Hide if no image
    }
}

Option 2: Using Picasso #

Add the dependency:

implementation 'com.squareup.picasso:picasso:2.71828'

Then in the Adapter:

override fun onBindViewHolder(holder: PostViewHolder, position: Int) {
    // ... set other post fields as above

    val postImageView = holder.postImageView
    if (!post.imageUrl.isNullOrEmpty()) {
        Picasso.get()
            .load(post.imageUrl)
            .placeholder(R.drawable.placeholder_post)
            .error(R.drawable.error_post)
            .centerCrop()
            .into(postImageView)
        postImageView.visibility = View.VISIBLE
    } else {
        postImageView.visibility = View.GONE
    }
}

• Image Compression: Before uploading, resize/compress the image to reduce file size (use a library like Compressor or Android's built-in Bitmap.compress()). This saves Storage space and speeds up uploads.
• Upload Progress: Add a progress bar while the image uploads to improve user experience.
• Security Rules: Once you add authentication, update your Firebase Storage/Firestore rules to restrict uploads to authenticated users (right now, keep them open temporarily since you don't have auth set up).

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