Uploading files with Vue.js Element-UI and axios triggers unwanted page refresh

I am utilizing the element-ui file upload component() to manage the frontend of image uploading. All functionalities work flawlessly (file is successfully sent to the server, etc). However, for some reason, after the axios's successful response code runs, the page automatically refreshes. Interestingly, when I send the same post request without including the file, the page does not auto-refresh.

The submit button type is set to "button," so that is not the issue in this scenario.

Below is the code for the axios post request:

base.post('/add/visit/', formData, {headers: {'Authorization' : 'Bearer ' + localStorage.getItem('token'),'Content-Type': 'multipart/form-data'}})
    .then(response => {
      console.log(response);
      resolve(response);
    })
    .catch(err => {
      console.log(err);
      reject(err);
    });
})

Answer №1

I'm curious if it automatically defaults to a form submit action. In the case where there is no href property, does it cause a page reload? Is there a specific event that can be triggered like onClick(e)? Then within the handling function, you would use e.preventDefault();

Answer №2

With Element-ui upload feature, you can effortlessly upload files without having to refresh the page:

el-upload(:action="formUploadLocation" :data="form" :auto-upload="false" ref="upload" :file-list="list"
          :on-success="handleSucces" :on-error="handleFail"

Then, when you are ready to submit the form (only when :auto-upload=false):

this.$refs.upload.submit()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

angular-ui-tab-scroll: Odd spacing between blocks and tabs, each separated individually

Greetings! I would like to express my gratitude for this wonderful library! However, I am encountering an unusual issue when trying to wrap a tabset with tabs that are included separately. This can be done either by adding individual tab elements manually ...

Refreshing Vue by reloading new components and injecting them into the HTMLDOM

Is there a way to make Vue re-initialize itself after inserting a component fetched from an API into the DOM? The component looks like this: <div><My_component /></div> This component is part of a back-end snippet. When inserting it i ...

JavaScript encountering issues when parsing a string that was serialized using Gson in Java

This question is unique and differs from this one as it specifically addresses the representation of JSON strings serialized from Java in literal form in JavaScript, with a focus beyond just double quotes. In my scenario, I am serializing a JSON object in ...

Incorporating a delay into looped HTTP requests while effectively utilizing Promise.all to track their completion

Greetings! In my current project, I am trying to introduce a 50ms delay before each subsequent HTTP request is sent to the server. Additionally, I aim to incorporate a functionality that triggers after all requests have been successfully made. To better e ...

Navigating through a JSON object created from a Python dictionary in JavaScript

When working on a django app, I have encountered an issue with returning JSON data on a jQuery ajax call: { "is_owner": "T", "author": "me", "overall": "the surfing lifestyle", "score": "1", "meanings": { "0": "something", ...

Adding a Material UI Tooltip to the header name of a Material UI Datagrid - a step-by-step guide!

I've nearly completed my initial project, but the client is requesting that I include labels that appear when hovering over specific datagrid cells. Unfortunately, I haven't been able to find any solutions on Google for adding a Material UI Tool ...

Increment numbers using XML elements

In my XML construction process, I start with a base XML and add elements like this: $(xml).find('PARENT').find('CHILDREN').each(function(i){ outputstr += '<lorem id="">' }) As the "parent" object appears mul ...

Utilizing sessions in Node.js Express3 to verify user's authentication status

Here is the content of my app.js file: app.configure(function(){ app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.enable('jsonp callback'); app.set('view engine&apo ...

What is the best approach for updating data in a v-data-table dynamically?

I'm currently working on a node and electron application that utilizes vuetify to create a table (v-data-table) fetching data from an oracle database. The issue I'm facing is that even though the data changes based on the input value, the table f ...

concealed highcharts data labels

I attempted to create a bar chart using Highcharts, and initially it worked fine. However, I encountered an issue when displaying multiple indicators - the datalabels for certain data points are hidden. For example, the datalabel for "provinsi aceh" is not ...

Processing a JSON array of objects in AngularJS

When using Angular's fromJson function to parse a JSON string, I encountered an issue. If the JSON is a simple array like "[1, 2]", the code works fine. However, I need to work with an array of dictionaries instead. var str = "[{'title' ...

Mark scheduled specific time periods

I need help removing booked time slots from the total time slots. How can I achieve this? Input: Actual time slots: [ '10:00-10:30', '10:30-11:00', '11:00-11:30', '11:30-12:00', '12:00-12:30', ...

"Modify the MySQL database each time a user changes the value in a

As a student, I am looking to update value(s) whenever a student changes the value(s) in the correction or update form. So far, I have been able to retrieve and display values in text boxes based on the name selected from a dropdown list from the database ...

Tips on transferring a Rails variable to Ajax

Struggling to integrate a progress bar (Javascript) into my Ruby on Rails application, I am facing difficulties in passing values from the controller to JS for updating the bar. In my initial attempt, I used a basic global variable ($count), but it remain ...

Can you explain the process of a put request in Angular, Express, and Mongoose?

My colleague and I are currently deciphering the inner workings of a code snippet generated by a tutorial. Our main focus is on how the client/server communication flows once line 8 of factory.js is triggered: factory.js app.factory('postFactory&apo ...

Syntax error encountered with the null-coalescing operator (`??`)

Encountering Syntax Errors After Upgrading Angular Plugin I am facing some syntax errors after attempting to upgrade a plugin in a system that was originally developed by someone else. Although I am relatively new to Angular, I tried to simply replace the ...

Utilize MaxMind GeoIP2 to identify the city accurately

I have been using this simple code to retrieve the city name through the maxmind service (geoip2). It has been working flawlessly and I am grateful to a fellow member of this site who shared this code with me. However, there is an issue when the user&apos ...

Dealing with errors when chaining promises in a react-redux application

This is related to a question asked on Stack Overflow about Handling async errors in a react redux application In my react-redux setup, I am facing a scenario where I need to chain multiple API calls upon successful completion of each. How can I achieve ...

Is it necessary to clean up the string to ensure it is safe for URLs and filenames?

I am looking for a way to generate a URL-safe filename in JavaScript that matches the one created using PHP. Here is the code snippet I currently have in PHP: <?php $clean_name = strtr($string, 'ŠŽšžŸÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÑÒÓÔÕ ...

Surprising pause in the menu transition animation

Currently, I am in the process of developing a menu that seems to have some flaws. One issue is that it appears a bit choppy, but the more concerning problem is the half-second delay after clicking an item before it animates. The concept behind this menu ...