如何重构代码以支持在模板定义完成前上传图片？

Hey there! Let's break down how you can refactor your newImageSelected function to support uploading images before the template is fully created (when the template doesn't have an ID yet).

First, let's look at the core limitation in your current code: it relies on vc.template.id to exist, which means it only works for already-defined templates. To handle the template-creation phase, we need to add logic to either temporarily store the image or adjust how we interact with the upload API.

1. Add Template Existence Check & Temporary Image Storage #

Modify your newImageSelected function to check if the template has an ID. If not, stash the image for later; if it does, proceed with your original upload flow:

newImageSelected: function (imageList) {
  let vc = this;
  console.log('vc.template.id', vc.template.id);

  // Case 1: Template hasn't been created yet (no ID)
  if (!vc.template.id) {
    // Store the image in a temporary component variable
    vc.stashedImage = imageList[0];
    alert("Image saved temporarily— it'll upload automatically once you create the template!");
    return;
  }

  // Case 2: Template already exists (original working flow)
  Template.uploadImage(vc.template, imageList[0])
    .then(function (response) {
      alert("La media ha sido cargada");
      console.log("Upload successful:", response);
      // Add any post-upload logic here (e.g., updating template state)
    })
    .catch(function (error) {
      alert("Failed to upload media. Please try again.");
      console.error("Upload error:", error);
    });
}

2. Auto-Upload Stashed Image After Template Creation #

Next, find the function in your code that handles template creation (e.g., createTemplate). After the template is successfully created and assigned an ID, check for the stashed image and trigger the upload:

createTemplate: function () {
  let vc = this;
  Template.create(vc.template)
    .then(function (createdTemplate) {
      // Update the component's template instance with the newly created (ID-bearing) template
      vc.template = createdTemplate;
      alert("Template created successfully!");

      // Check if we have a stashed image to upload
      if (vc.stashedImage) {
        Template.uploadImage(vc.template, vc.stashedImage)
          .then(function (response) {
            alert("Stashed image uploaded successfully!");
            console.log("Image upload post-template-creation:", response);
            // Clear the stashed image to avoid duplicate uploads
            vc.stashedImage = null;
          })
          .catch(function (error) {
            alert("Failed to upload stashed image. Please upload it manually.");
            console.error("Stashed image upload error:", error);
          });
      }
    })
    .catch(function (error) {
      alert("Failed to create template.");
      console.error("Template creation error:", error);
    });
}

3. Advanced: Backend-Supported Temporary Image Storage (Optional) #

If your backend allows uploading images to a temporary storage space (without linking to a template ID first), you can enhance the Template.uploadImage method to handle both states:

// Modified Template.uploadImage method example
uploadImage: function(template, image) {
  if (template.id) {
    // Original flow: Upload directly to the existing template
    return axios.post(`/templates/${template.id}/images`, image);
  } else {
    // New flow: Upload to temporary storage, save the temp key to the template
    return axios.post('/temp-images', image)
      .then(res => {
        template.tempImageKey = res.data.tempKey;
        return res;
      });
  }
}

Then, when creating the template, pass the tempImageKey to your backend so it can associate the temporary image with the new template.

Key Notes #

• Handle edge cases: If template creation fails, consider adding logic to notify the user about the stashed image or clear it.
• For multiple images, replace vc.stashedImage with an array (vc.stashedImages) and loop through it for uploads.
• Clean up temporary variables when the component is destroyed to avoid memory leaks.

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