I am developing a Vue.js web application that involves a photo upload feature. It works perfectly on desktop browsers, but I am encountering a critical issue on Mobile Chrome (Android).

The Symptom: When I open the camera (using capture="camera") inside a modal dialog, take a photo, and return to the app, the dialog immediately closes or the entire browser page crashes/reloads. This only happens when taking a photo; selecting an existing file usually works fine.

What I have implemented: I am using URL.createObjectURL for image previews and ensuring that URL.revokeObjectURL is called in the onUnmounted hook to prevent memory leaks. I also have a custom resizeImage function that runs before setting the state.

Here is the relevant code snippet:

        

          

            

              {{ type.label }}
              

                
                  photo_camera
                
                

                
                  file_open
                
                

              
            
            

              등록 필요
              
            
          
        


..................


const onPhotoChange = async (event, photoType) => {
  try {
    const file = event.target.files[0];
    if (file) {
      try {
        const resizedFile = await resizeImage(file); // Utility function
        readingData.photos[photoType] = resizedFile;

        if (photoPreviews[photoType]?.startsWith('blob:')) {
          URL.revokeObjectURL(photoPreviews[photoType]);
        }

        photoPreviews[photoType] = URL.createObjectURL(resizedFile);
        photoDirtyFlags[photoType] = true;
      } catch (error) {
        console.error("Resizing error:", error);
      }
    }
  } catch (error) {
    alert(error);
  } finally {
    event.target.value = '';
  }
};

// Cleanup in onUnmounted
onUnmounted(() => {
  ['FAR', 'NEAR', 'ETC'].forEach(type => {
    if (photoPreviews[type]?.startsWith('blob:')) {
      URL.revokeObjectURL(photoPreviews[type]);
    }
  });
});