VueJs Tutorial

Vue JS Align Center Image Vue Js Change Button Color On Click Vue js convert String to Array | Split string by comma Vue.Js Open link in new tab Vue.Js show image in popup Vue Display Json Data in Table Vue Js Password Show Hide Vue Js Checkbox Select all | Unselect All Vue Js Fetch data from API | Load Data without reoloading Page Vue js Array every() Method Vue Js Concat Array Vue Js Array copyWithin Function Vue js Array entries function Vue js Array fill function Vue js Array filter Method Vue Js Find Object in Array by Id Vue FindIndex Method Vue js Array from function Vue js Array includes function Vue Js Array Find Index by Value Vue js Array.isArray Function Vue js array join function Vue js Array Keys Function Vue js Array lastindexOf Function Vue js Get Array Length Vue 3 Map Array Vue js Array Pop function Vue Js Push to Array Vue js Array Reverse Method Vue Js Array Shift Method Vue Js Array Slice Method Vue Js Sort Array Method Vue Js Array Splice Method Vue Js Convert Array to String | toString Method Vue Js Add new item start of array | unshift Array Method Vue js valueOf Array Method Vue Js Get character at a particular index in a string Vue Js charCodeAt String Method Vue Js Concat String Method Vue Js String endswith Method Vue Js String fromCharCode Method Vue Js String Includes Method Vue Js String indexOf Method | Extract Index of String Vue Js String lastIndexOf Method Vue Js Get String length Property Vue Js Compare Two String Vue Js String Match Method Vue Js String Repeat Method Vue Replace String Vue Js String Search Method Vue Js Split String Method Vue Js String startsWith Method Vue Js String substr Method Vue Js String Substring Method Vue Js Convert String to lowercase Vue Js String toUpperCase Method Vue Js String toString Method Vue Js String trim Method Vue Current Date Vue Js Get array value by index Vue Get Current Date and Time Vue Round to 2 Decimal Places Vue Js Encode and Decode a Base64 String Vue Js URL Encode/Decode Vue Close Window Vue Js Get Current Url Vue Get Domain Name Vue Js Get Current path and filename of Url Vue Js Get Current Web Protocol Vue Js Convert JSON Object to String Vue Js Generate Random Number Vue Print Page Vue Js Get Screen Size Vue Js Array foreach Loop Vue Js Add Table Row Dynamically Vue Js Get Hash from URL Vue Js Delete Table Row Dynamically Vue.js Get Browser User Agent Vue Line Break Vue Js Detect Browser Language Vue.js Parse JSON String Vue Js Detect Internet Connection Vue Get Element by Id Vue Setinterval and Clearinterval Vue Reset Form Vue Js Change Image Source | Url Vue Js Get Max value from Array Vue Js Check if Array or Object contains Value Vue Js Get Min value from Array Vue Js Enable Disable Button onclick Vue Js Local Storage Vue Scroll to Bottom Vue Js Scroll to Top of Page Vue Js Enable Disable Input text Field Vue Settimeout | Delay Vue Js get value of selected option of Dropdown Vue Textarea Default Value Vue Js Get Current Location Vue Js Multiselect Dropdown Vue Js Remove Hash From URL Vue Js Redirect to Another Page Vue Js Force to reload render Vue Js Get TextArea Value Vue Js check Cookie is Enabled or Disabled Vue js Dynamic class Binding Vue Js Get query Params Vue Js Set Focus on Input Vue Js Set Hash Value in URL Vue Js Call Function on Page load Vue Js Get User Browser Platform Vue Js v-if v-else Directive Vue Js Two Way Binding Model Vue Js Get Client Time Zone Vue Input on Change Vue Js Inner join of Array of Objects Vue Js Send Form Data to API using Axios Vue Js Renders Dynamic content inside an element Vue Js V Show Conditional Rendering Vue js Render element One time Vue Js v-pre directive Vue Js Hide VueJS syntax while the page is loading? Vue Js Update the text content of an element Vue js Toggle class / add / remove class Vue Js Dynamically Change Style | Color | Font-Size Vue Js Dropdown With Search Box Vue Dropdown multiple select with search Vue Select Default Value Vue Js Enable Disable Dropdown Vue Js Dropdown Option Color change on select Vue Js Select Multiple Chips Vue Js Chips with Search Box Vue Js Chips Input | Tags Input Box Vue Js Enable Disable Chips Input Vue Radio Button Default Checked Vue Js Radio Button Get Selected Vue Js Toggle Radio Button Disability Vue Js Radio Button Validation Vue js Radio Button Checked Event Vue Js check box set default checked/selected Vue Js Get checkbox selected item Vue Js checkbox Select All Vue Enable Disable textbox on checkbox click Vue Checkbox Single Select Vue Js Disable button if input empty Vue Disable Button on Click Vue Js Radio Button Group Example Vue Js Delete All Items of Array Adding Elements to Arrays in Vue.js using Input Elements Removing Duplicates from Arrays in Vue.js with the filter Method Validate Input Text Length and Display Error Messages in Vue.js Vue Js check if two arrays are equal Vue Table with Pagination Vue Js Sort Array by Alphabet Vue Js Sort Array by Number | Ascending | Descending Vue Js Compare Objects in Two Arrays Irrespective of Order Determine Viewport Height & Width in Vue.js Vue Js Navigation with history.back(), history.forward(), and history.go() Converting Decimals to Integers in Vue.js with Math.trunc() Function Vue Js Rounding Up to Nearest Integer with Math.ceil Vue Js Rounding Down Decimal Numbers Updating Dates in Vue.js with Input and Two-Way Data Binding Vue.js Text Field with Clearable Button Vue Js Multi Select Date Picker Vue Js Single Choice Chip Selection from Drop-Down Menu Vue Js Input mask Clearing Radio Button Selection with Vue.js Vue Window Fullscreen Converting Celsius to Fahrenheit in Vue.js Vue Js Display base64 Image Vue Convert Image to Base64 Dynamic Tabs with Add and Remove Functionality in VueJS Image zoom in and zoom out in Vue js Vue Js Password Generator Vue Js Validate Phone Number Vue Js Email Validation Vue Js Name Validation Vue Js Validate Image Upload Vue Js Copy Paste Image | Image Paste Clipboard Vue Js Password Validation Vue js Confirm Password Validation Vue Js Password Strength Meter | Indicator Vue Js Calculate Distance Between Latitude Longitude Points Vue Js calculate Age from date of birth | Age Calculator Vue Js Break foreach loop Vue Copy to Clipboard onclick button | Vue Js Paste from Clipboard Vue Js Toggle Button Vue Js Switch | On | Off Vue Js Toggle DropDwon Vue Js Change Button Text onclick Vue Js Change Button Border Color on Click Vue Js Character Count Vue Js Restrict Special Characters in an input field Vue Js Allow only alphabets in the TextBox Vue Js Allow only Alphabets and Number Vue HTML to PDF Dynamic Textbox Color Change in Vue JS Based on Value Vue Js Change Page Title Vue Js Change Meta Description Vue Js Confirm Yes No Dialog Vue Js Alert on click button Vue Js Input Mask for Date Vue Js Modal Popup Example Vue Js OTP authentication Vue Js OTP Input Vue Js Currency Input Vue js Aadhaar Masking Vue Input Number Only Vue Js Validate Aadhaar Number Vue Js Validate IFSC Code Vue js Replace spaces And Special Character with dashes and make all letters lower-case Vue Js Display Text for Few Seconds Vue Js Generate Random Color | Hexa Decimal | RGB Color Vue Js Enlarge, Shrink Image on Hover Vue Js Create Custom CAPTCHA Generator Firebase Setting with Vue Js Vue Js Update width and height of an image using input field values Vue js Extract all numbers from user input Vue Js Toggle Show More and Show Less Text Vue Js Change image size with input range slider Vue Js display only the first N items of a list Vue Js Convert Seconds into Hours and Minutes Vue Js make text editable on click Vue Js Year Picker Example Vue Js Display Mouse/Cursor Position on Screen Vue Js Reverse List in v-for loop Vue JS Filter by Category, Pagination with Search in Table Vue Js Validate Time 12 Hours format Vue.js Insert an Array of Objects at a Specific Position in an Array Vue js Convert Time 24 hour to 12 hour format Vue Js Get Current Time in 24 hours format Vue Js Convert String into Camel Case Vue Js Convert Snake Case String into Camel Case String Vue Js Generate Random Sign Vue Js Calculate Midpoint between two point Vue Js Calculate Days between Dates Vue Js Convert String into Title Case Vue Js Get base URL Vue Js Get Random Item from Array Vue Js Generate Random IP Addresss Vue Js Convert Hexa Color to RGB Color Vue Js Convert Degree into Radian Vue Js Convert Decimal to Binary Vue js Break an array list into two arrays (lists) Vue Js Get Last item from Array Vue Js Image Slide Show Vue Js Auto Resize Textarea Vue Get First Element of Array Vue Js Automatically Refresh or Reload a Page Vue Js Get Month Name from Date Vue Js Date Range Picker Vue Js Change Favicon dynamically Vue Js Select all text in Textarea Vue Js center an image (horizontally & vertically) Vue Js Remove Empty String from array Vue Js Remove last Comma of a String Vue Js Remove Multiple space between String Vue Js Get Tomorrow Date Vue Get Ip Address Vue Js Intersection of Two Array Vue Js Union of Two array Vue Js Change SVG Size Using Range Slider Vue Js Generate OTP Vue Js Display Time Based Message Vue Js Generate Unique UUID Vue Js Convert Text to Speech Vue Js Generate Random Background Color Vue Js Change Dynamically Background color Vue Js Get Domain Name from Email Address Vue Js Copyright Year in Footer Vue Js Check property exist in object Vue Js Average of Array items Vue Js Add Item to array if does not exist Vue Js Find Number from String Vue Js Find words that are fully capitalized (all capital letters) in a text Vue Js Remove Item From Array by Id Vue Format Number with Commas Vue Js Detect Caps lock turned on or not Vue Js Disable right click on Web page Vue Js check if a variable is an array Vue Js Find Cube root of Number Vue Js Get Dimensions/Size of Image Vue Js Count the Number of Keys/Properties in an Object Vue Js checks whether the last digit of three numbers is the same or not Vue js Detect Operating System of User Vue Js Detect Window Version Vue Check if Mobile Vue Js Track Time Spent on page Vue Js Detect user switches tabs or leaves the page Vue Js counts when a user switches tabs or leave the Page Vue String to HTML Vue js change position of elements of array Vue js change array index position by Up and Down click Vue js Scroll div to bottom Vue Js div Vertically Scrollable using CSS Vue js sum of all elements/number to given array Vue js Convert Object into Array Vue js Convert Multiple Object into Array Vue Js Convert Array into Object Vue Change SVG Color Vue Scroll to element on click Vue Change Text of div on Click Vue Change Text Color on Hover Vue Change text Font Size Vue concat string after specific word Vue Js img src Vue check undefined Array or Object Vue Check Array specfic Value Exist or Not Vue Remove Object Property Vue change div background color Vue Change Background Color using Radio Button Vue group an array of objects by key Vue Js Count frequency of each element in an array Vue Check Value is Integer Vue Convert Float to Int Vue Js Infinite Scrolling Vue Js push to array with key Vue Js Push to Ref Array Vue Js Cut And Paste Text Vue Js Get Element by ref Vue Js Get Element by Class Name Vue Js Reset Data Values Vue Js Image Swipe|Slider (left,Right) using Touch Vue Js Extract Text from Image Vue Js Extract Text from Pdf Vue Reload or Refresh Page Vue Js make text with (#)hash tag bold Vue Js append to string dynamically Vue Js Disappear Alert Automatically after 5 seconds Vue Js table with expandable rows Vue Js Get last character of string Vue get previous selected option Vue Get Image from URL Vue Disable select option Vue Js Login Form | Page Vue Detect Browser and Tab Closing Vue js check if string is all uppercase Vue Js Table Sort by Date Vue Js Table with Edit and Delete Button Vue Detect Key Press Vue Js Enter Key event Vue Table Sticky header Vue Js Generate Random Id Vue Table with Checkbox | SelectAll Vue Image full screen on click Vue Get Width and Height of Element Vue nexttick function Vue Form Validation Vue Js change image on hover Vue Add Remove Input Field Vue Convert Base64 to Image Vue get text of selected option Vue Get Text from Div Vue Get highlighted text Vue Image Zoom on Hover Vue multiselect dropdown with checkbox Vue table with select row Vue dropdown change event Vue Table with Search Vue Table With Image Vue Dropdown with Image Vue Get string after specific character Vue get first occurrence of empty string in array Vue Textarea Fullscreen on Click Vue random color from an array on scroll Vue Track changes in textarea Vue Find and Replace text in Textarea Vue Change Button Icon On Click Vue search text in Google on click Vue Disable Text Selection Vue Remove item from array by key index Vue Send Text in Google Translate on Click Vue Concat String with Space Vuetify v-select on change Event Vue Add Item to Object Vuetify Generate a list of years Vuetify v-textarea readonly Vuetify Show Hide Password Vuetify Reset Form Validation Vuetify Change Color Button on Click Vuetify open link in new tab Vuetify Change Button Icon on Click Vuetify Reset form Fields Vuetify Change Button Text on Click Vuetify Input allow only Number Vuetify Radio Button Default Checked/Selected Vuetify clear input field after submit Vuetify Enable Disable Input Field on Click | Text Field Vuetify Checkbox Single Select | Checked Vuetify Checkbox Default Checked/Selected Vuetify Auto Resize Textarea Vuetify trigger method on clear of v-text-field | v-textarea Vuetify Limit Input Characters Vuetify Disable button when text field empty Vue Convert Div to Base64 Image Vue Js Filter array of Object Vue Generate Random Quote Vue Get Element By Key Vue Get Element Property Vue Get Element Position Vue Get Element Scroll Position Vue get element by attribute Vue Add HTML Element dynamically Vue Add Class to Element by Id Vue add event listener to ref Vue Create Element Dynamic Vue Create Dynamic Table Vue Element Resize Event Vue Add Object to Specific Position in Array Vue img :src concatenate variable and text Vue show hide textbox based on dropdown value Vue Detect Viewport Changes Vue Upload Image to Server Vue Clear Input Field on Click Vuetify clear input field Vue Set Width of Element Vue Input get focus event invalid Vue Input Default Value Vue Checkbox Checked Event Vue Checkbox array of objects Vue Checkbox value True False Vue checkbox show hide div Vue Checkbox Readonly Vue Checkbox Disabled After Checked Vue checkbox change event value Vue checkbox checked dynamically Vue check if checkbox is checked Vue Textarea maxlength Vue Add Two Numbers Vue Get Device Memory Vue Clone Array of Object | ES6 way Vue Js Computed Property Vue Js Watch Property Vue Js Deep Watchers Vue Class Binding Multiple Condition Vue Class binding Ternary Operator Vue js add multiple classes Vue Add multiple classes conditionally Vue conditional style binding Vue js Add multiple style properties Vue Js Scoped CSS Vue Show Random Image Vue Uppercase Array of Strings Vue js Capitalize each word of a string value in an array of objects Vue Js check if item already exists in array Vue Js check if all the arrays inside an array of arrays are empty Vue Js Remove/Delete array from an array of arrays Vue Js Add arrays into an array Vue Js Create Array of Object Dynamically Vue Js convert array of arrays to array Vue Js Get value from child Array with a given ID Vue Js Input Allow Only Positive Number Vue Js input type number min max validation Vue Js Disable input Field Conditionally Vue Js Convert String Boolean Vue Js Change Image Src from Input Field Vue Js Disable Button for 5 Seconds Vue Js Disable Button while Loading Vue Js Move to Next Input Automatically Vue Js Input Readonly Vue Js Get Input Value by Id Vue Js Click on Div to Focus Input Vue Js Select Input Text on Focus Vue Js Highlight Text with Input Field Vue Js Clear Input Field on Blur Vue js focus next Input on enter Vue Js Check if Input is Empty Vue Js Get Location From IP Address Vue Js Get Src from Iframe Vue Js Get Current Year Vue Js Countdown Timmer Vue js replace spaces with dashes Vue Js Remove Special Character from String Vue Js Download Image From URL Vue Js Replace Space with Underscore Vue Js Replace Dash(hyphen) with Space Vue Js Check if String is Empty Vue Js Store object in session storage Vue Js Get Data(object) from Session Storage Vue Js Set Cookie Vue Js Use Image as Link Vue Js Disable Copy Paste in Web Page Vue Js Pick Color From Image Vue Js Generate and Download Qr Code Vue Js Scroll Down Indicator Line Vue Js Generate Random String Vue Js Display date time of document when last modified/updated Vue Js Check Whether User Device in Dark or Light Mode Vue Js Remove Element From Dom Vue Js v-for select options Vue Js Change Button Class on Click Vue Js Button Link to Another Page Vue Js Button onclick Event Vue Js Convert String to Number Vue Js capitalize first letter of each word in a string Vue Js Get Current Time Vue js not equal operator Vue Js Get Last Two Character of String Vue Js check empty String and Space Vue js set a radio button checked if statement is true Vue Js Properly Watch for nested data Vue Js Check if Element is Hidden Vue Js Dynamically check if element hit top of window Vue Js Detect Internet Speed Vue Js Window Resize Event Vue Js Change Button Color on Hover Vue Js Ternary Operator Example Vue Js Multiple Ternary Operator Vue Js Dynamically Bind Title Content Vue Js Remove leading zero from number Vue Js Remove Leading Zero from Array Vue Js Add Zero '0' to Single Digit Vue Js Add days to date Vue Js Call Multiple Function onclick event Vue Js Increase Decrease Image Size on click Vue Js Remove White Space from end of string Vue Js Remove white space from the beginning/start of a string Vue Js Count Number of Words in String Vue Js count occurrences of a specific word in a string Vue Js Download PDF from API Vue Js Scroll to Element by Id Vue Js Select dynamic (multiple) elements Vue js string replace only numbers with space Vue Js Get query parameter from url Vue Js string replace slash with space Vue Js String Replace Hash(#) with space Vue Js Get Class of Clicked Element Vue Js Remove all Spaces from String Vue Js Text field allow only 10 digt number Vue Js find nearest location using latitude and longitude Vue Js Compare Two Dates Vue Js Convert Json Object to Base64 Vue Js replace all occurrences of character in string Vue Js Convert username and password to base64 Vue Js Convert Base64 to Json Object Vue Js Encode password to Base64 Vue Js Generate Hash Password Vue Js Data Encode to base64 with 'private key' Vue JS Generate array of 10 random values Vue Js Generate Secret Key | Private Key Vue Js reload/refresh image with same URL onClick Vue Js calculate time left to given date Vue Js setDate Method Vue Js Get Multiple Random Element from Array Vue Js go back to previous page Vue Js Password validation regex Vue Js Username and Password Validation Vue Js Encode Decode Json Object Vue Js Remove Empty Object from JSON Vue JS Remove Empty or Null Value from JSON Vue Js Get first Two Character of String from JSON Vue Js Get Current Year Last Two digit Vue Js Convet 2-digit date to a 4-digit date Vue Js File upload size limit validation Vue Js Get All Dates Between Two Dates Vue Js Get Substring before a specific Character Vue Js Get Access DOM Element Vue Js Open Link in new Window (not Tab) Vue Change URL without Reloading Vue Js Create CSV File Vue Js Download JSON Data on Click Vue Js Add JSON to array by user input Vue Js Download Text on Click Vue Js get form data on submit Vue Js Change Button Text Color on Click Vue Js Submit Array Vue Js Change Text Field Color conditionally Vue Js Push Array to Array Vue Js Push Array to Array with Key Vue Js Change Button Color and Icon on click Vue Js Get date format day month year Vue js format numbers as currency strings Vue Js Remove Duplicate Object from Array Vue Js Notification Popup Vue Js Toast Notification Vuetify Color Picker Vue Js Color Picker Vue Js Datepicker change event Vue Js Date Picker Vue Js disable past dates in datepicker Vue Js datepicker disable future dates Vue Js Datepicker Range Vue Js Datepicker get value Vue Js Set Datepicker Default Value Vue Js set default current date in datepicker Vue Js Date Time Picker Vue Js Time Picker Example Vue Js Get Middle Element of Array Vue Js Get nth item/element of array Vue Js Get Every nth Element/item of Array Vue Js generate all possible permutations of a string Vue Js encryption decryption String using crypto js Vue Js Compress Decompress string Vue Js Write text to file Vue Js Create Random Token Vue Js uncapitalize first letter of string Vue Js modal signup form example Vue Js Modal Login Form Example Vue Js Modal Close Button Vue Js Close Modal After Form Submit Vue Js Modal Close when Click Outside Vue Js Month Picker Example Vue Js Multi Select Month Picker Vue Js Concat Text Class Vue Js Get current array index position Vue Js Conditionally Enable Disable Button Vue Js Button :disabled multiple conditions Vue Js Image Upload with preview Example Vue Js Overlay effect on hover with text Example Vuetify Display BreakPoint | Get Screen Size Vue Js Multiple Image Upload with preview Vue Js Open Close Sidebar Example Vue Js Textbox allow only capital letter Vue Js Input allow only small letter Vue Js Input Mask Credit Card Expiry Date Vue Js Input Mask for Credit Card | Debit Card Vue Js Credit Card Expiry Date Validation Vue Js Change Tab Active Color Vue Js Validate CVV Number Vue Js Credit Card Number Generator Vue Js Input mask date with time Vue Js Input Mask for Time Vue Js Sort Array Object by Key Vue Js Sort Array Object by Json property Vue Js Drag and Drop Image Upload Vue Js Trigger/Open Input file onclick button Vue Js Open URL as Modal Popup with Overlay Vue Js Change Input Color Based on Value Vue Js mask a string with asterisks (*) show only last 4 digit Vue Js Show/Display Image on Hover Vue js Disable selected dropdown options Vue Js Disable Checkbox after being Checked Vue Js Add timestamp when the checkbox is checked Vue Js Timestamp on a change event in a Dropdown menu Vue Js days left in the month Vue Js change or update first value of array Vue Js Validate Url Example Vue Js Validate Ip address Vue Js Draggable Div | Resize div on drag Vue Js concat string and variable Vue Js Get Last Word of string React Js Get Text from div Passing data from Vue js to PHP using Axios Vue Date Format | DD/MM/YYYY | YYYY-MM-DD Vue Js post checkbox data to API React Js Reset/Clear form field after submit Vue Js Fetch JSON data then push to Array Vue Js get current timestamp How can a form in Vue Js be validated to accept decimal numbers? Vue Js Detect Adblocker Vue Js SVG Download as Png | Download Svg Code Vue Js Rearrange Image Position | Drag and Drop Vue Js todo list App Vue js Select On Change Update Value Vue Js Convert Number into K thousand M million and B billion Vue Js Convert Number to Lakh or Crore Chart Vue Js Random Background Color Vue Js Subtract Two Number Vue Js Get First Letter of Each Word in String Vue Js Tutorial Vue Js Change Image Every 5 Seconds Vue Js Multiple Two Number Vue Js Multiple Two Array of Element Vue Js Divide Two Numbers Vue Js Calculate quantity and Total price in Table Vue Js Js Horizontal Scrollable Image List Example Vue Js Display Array of Image Vue Js Check if Element contains a specific CSS Class Name Vue js Check Input Contains Number Vue Js Convert File Size to MB Vue Js Filter by Range with Radio Button Vue Js Get Multiple Checkbox Value onclick Button Vue Js Delete Multiple Rows Item Using Checkbox Vue Js Get Multiple Radio Button Value Vue Js Bold Specific Part of String Vue Js Category Subcategory Dropdown List Vue Js Check if Input File is Empty Vue js Disable Submit Button if Input File is Empty

Vue Js Image Upload with preview Example

Vue Js Image Upload with preview Example:Vue js allows you to upload an image with a preview in just a few simple steps. First, create an input element of type "file" to handle the image selection. Then, add an event listener to capture the selected file. Next, use the FileReader API to read the file and convert it into a data URL. Store this URL in a data property. Finally, bind the src attribute of an image element to the data property to display the preview. By following these steps, you can easily implement an Vue Js Image Upload with preview functionality.

written

reviewed

updated

How can I implement Vue Js Image Upload with preview feature?

This code snippet demonstrates how to implement Vue Js Image Upload with preview feature.

When the user selects an image using the file input, the handleFileUpload method is triggered. It retrieves the selected file and creates a FileReader object. The FileReader reads the contents of the file and converts it to a data URL using the readAsDataURL method. The resulting data URL is assigned to the previewImage data property.

The image preview is displayed in the image-preview div using the v-if directive, which only shows the div if previewImage is truthy. Clicking on the preview image triggers the showModal method, which sets the isModalVisible property to true, displaying the modal dialog.

The modal dialog shows the preview image in a larger size. Clicking on the image or the close button triggers the hideModal method, which hides the modal by setting isModalVisible to false.

Vue Js Image Upload with preview Example - HTML Code

  <div id="app">
    <div class="upload-container">
      <label for="file-upload">Choose Image</label>
      <input id="file-upload" type="file" @change="handleFileUpload">
      <div class="image-preview" v-if="previewImage">
        <img :src="previewImage" alt="Preview" @click="showModal">
      </div>
    </div>

    <div class="modal" :class="{ 'show': isModalVisible }" @click.self="hideModal">
      <div class="modal-content">
        <img :src="previewImage" alt="Preview">
        <span class="modal-close" @click="hideModal">&times;</span>
      </div>
    </div>
  </div>

Run

Output of Vue Js Image Upload with preview Example

Building an Vue Js Image Upload with preview - Javascript Code

This code demonstrates an Vue Js image upload feature with a preview. The data object contains two properties: previewImage and isModalVisible. previewImage initially holds a default image URL, which is displayed as the preview. When the user selects a file using the file input, the handleFileUpload method is triggered. It retrieves the selected file, creates a FileReader, and sets up an onload event handler. The event handler reads the file using readAsDataURL, and once the reading is complete, it updates the previewImage with the base64-encoded result. The showModal and hideModal methods toggle the visibility of a modal.

Vue Js Image Upload with preview Example - Javascript Code

<script type="module" >
    const app = Vue.createApp({
    data() {
        return {
            previewImage: 'https://www.sarkarinaukriexams.com/images/editor/1684231361spacex-g93fad4d75_640.jpg',
            isModalVisible: false,
        };
    },
    methods: {
        handleFileUpload(event) {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = () => {
                this.previewImage = reader.result;
            };

            reader.readAsDataURL(file);
        },
        showModal() {
            this.isModalVisible = true;
        },
        hideModal() {
            this.isModalVisible = false;
        },
    },
});
app.mount('#app');
</script>

Run

Here is an example of CSS code for implementing Vue Js image upload with preview functionality.

This is an example of CSS code for implementing Vue Js image upload with preview functionality. It includes styles for centering content, headings, file input and upload button container, file input label, preview image container, modal, and modal close button

Vue Js Image Upload with preview Example - CSS Code

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 /* Center the content vertically and horizontally */
 #app {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100vh;
     font-family: Arial, sans-serif;
 }

 /* Style for the heading */
 h3 {
     font-size: 24px;
     margin-bottom: 20px;
     text-align: center;
 }

 /* Style for the file input and upload button container */
 /* Style for the file input and upload button container */
 .upload-container {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin-bottom: 20px;
     /* Add margin-bottom for spacing */
 }

 /* Style for the file input */
 input[type="file"] {
     display: none;
 }

 /* Style for the file input label */
 label {
     padding: 10px 20px;
     background-color: #4CAF50;
     color: #ffffff;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
     border-radius: 4px;
     transition: background-color 0.3s ease;
 }

 label:hover {
     background-color: #45a049;
 }

 /* Style for the preview image container */
 .image-preview {
     text-align: center;
     width: 80px;
     /* Adjust the width as per your requirement */
     height: 80px;
     /* Adjust the height as per your requirement */
     border-radius: 50%;
     /* Make the container circular */
     overflow: hidden;
 }

 /* Style for the preview image */
 .image-preview img {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     /* Ensure the image fills the container without distortion */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     cursor: pointer;
 }

 /* Style for the modal */
 .modal {
     position: fixed;
     z-index: 999;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     visibility: hidden;
     opacity: 0;
     transition: visibility 0s linear 0.25s, opacity 0.25s 0s;
 }

 .modal.show {
     visibility: visible;
     opacity: 1;
     transition-delay: 0s;
 }

 .modal-content {
     background-color: #fefefe;
     border-radius: 4px;
     padding: 20px;
     max-width: 90%;
     max-height: 90%;
     overflow: auto;
     text-align: center;

 }

 .modal-close {
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
     font-size: 24px;
     color: #333;
     background: transparent;
     border: none;
     outline: none;
     padding: 0;
     margin: 0;
 }

 .modal-close:hover {
     color: #000;
 }

Run