Vue Js 2 Tutorial- How To Post Multipart Form Data To Web Server

In this Vue js 2 tutorial, we will learn how to post multipart form data to web server in Vue application using Axios Plugin and FormData web API.

To understand the concept, we will create a basic Vue app using Vue CLI. We will use the Bootstrap CSS framework to create the Form to get the values such as user name and user image.

To deal with server requests, we will use the Axios library. Since Vue.js is a JavaScript framework for developing high-quality and user-friendly apps.

However, it does not come with any proper mechanism to make external HTTP calls. Nevertheless, there are many ways through which we can make HTTP requests.

Hence, to make the requests to web server, we are going to use Axios HTTP Client.

Below are the steps which will make us implement the above-mentioned:

Step 1- InitializeThe Vue Project

Step 2- Adding The Bootstrap

Step 3- Install Axios Package

Step 4- Sending Multipart Form Data In Vue With Axios

Step 5- Conclusion

Step 1- Initialize the Vue Project

The first step is just to install the project by using the below command:

vue create vue-post-multipart-form-data

Then, we will head over to the project folder:

cd vue-post-multipart-form-data

To remove the multi-word error warning, we need to add the below code to the vue.config.js file:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Then, we run the given command to start the Vue app on the browser

npm run serve

Step 2- Adding The Bootstrap

Here, we will take the approach of adding the Bootstrap framework in Vue. We will simply add the Bootstrap CDN link in between the <head> tag of the public/index.html file.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh">

Step 3- Install Axios Package

Further, we will run the below command in order to install the Axios library in Vue:

# NPM
npm install axios --save

# Yarn
yarn add axios

To use Axios, we directly import it inside the Vue template.

Step 4- Sending Multipart Form Data In Vue With Axios

Afterward, we will open the Vue component file and add place the following code inside it:

<template>
  <div>
    <div class="container">
        <form @submit.prevent="onSubmit">
            <div class="form-group">
                <input type="file" @change="onFileUpload">
            </div>
            <div class="form-group">
                <input type="text" v-model="name" placeholder="Name" class="form-control">
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block btn-lg">Upload File</button>
            </div>
        </form>
    </div>    
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
      return {
         FILE: null,
         name: ''
      };
    },
    methods: {
        onFileUpload (event) {
          this.FILE = event.target.files[0]
        },
        onSubmit() {
          // upload file
          const formData = new FormData()
          formData.append('avatar', this.FILE, this.FILE.name)
          formData.append('name', this.name)
          axios.post('API GOES HERE', formData, {
          }).then((res) => {
            console.log(res)
          })
        }  
    }
}
</script>
<style scoped lang="scss">
.container {
  max-width: 600px;
}
</style>

Firstly, we created a basic form with file and name values. We are selecting an image using @change=”” event. This event allows us to listen to any change in a particular file.

We are getting name-value using a v-model directive.

To upload the file and name-value via form data, we declared both the values inside the data property:

We need to declare the two event handler the onFileUpload() and onSubmit() inside the methods life cycle hook in the Vue component.

The formData variable is creating the new FormData() instance where we are using formData.append() method and setting up file and name value.

Next, to send the multipart form data to the server we called the API inside the axios.post() method.

Step 5- Conclusion

In this Vue 2 tutorial, we have learned how to post multipart form data to a web server in Vue application using Axios Plugin and FormData web API.

Thanks

Step 1- Initialize the Vue Project

Step 2- Adding The Bootstrap

Step 3- Install Axios Package

Step 4- Sending Multipart Form Data In Vue With Axios

Step 5- Conclusion

Leave a Reply Cancel reply