Vue js Axios PHP File Upload Example

Today, We want to share with you Vue js Axios PHP File Upload Example.In this post we will show you image upload using ajax vue axios, hear for vue axios api, vue axios ajax image upload we will give you demo and example for implement.In this post, we will learn about Image Upload using PHP API with an example.

There are the Following The simple About Vue js Axios PHP File Upload Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop File Upload using Vue js Axios PHP, so the vue axios image upload structures for this example is following below.

READ : Angular Insert Update Delete Using PHP MySQLi

Step 1: Create Fresh Vue App

create vue cli app using Terminal

vue create myApp

Step 2: Install Axios

simple install axios npm package for Http Request

npm install --save axios vue-axios

Step 3: Use Axios (Axios package in main.js)

src/main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
   
Vue.use(VueAxios, axios)
   
Vue.config.productionTip = false
  
new Vue({
  render: h => h(App),
}).$mount('#app')

Step 4: Changes App.vue File

src/App.vue

<template>
  <div id="app">
    <fileupload></fileupload>
  </div>
</template>
  
<script>
import Fileupload from './components/Fileupload.vue'
   
export default {
  name: 'app',
  components: {
    Fileupload
  }
}
</script>

Step 5: Create vuejs Example Component

src/components/Fileupload.vue

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
      <h1>Simple Vue JS Axios - Image Upload using PHP API - infinityknow.com</h1>
      <label>File
        <input type="file" id="file" ref="file" v-on:change="onChangeImgFileStore()"/>
      </label>
        <button v-on:click="doUploadForm()">Upload</button>
    </div>
  </div>
</template>
  
<script>
  export default {
    data(){
      return {
        file: ''
      }
    },
  
    methods: {
      doUploadForm(){
            let memberData = new FormData();
            memberData.append('file', this.file);
  
            this.axios.post('http://localhost:8000/request_data.php',
                memberData,
                {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
              }
            ).then(function(data){
              console.log(data.data);
            })
            .catch(function(){
              console.log('Sorry, FAILURE!!');
            });
      },
  
      onChangeImgFileStore(){
        this.file = this.$refs.file.files[0];
      }
    }
  }
</script>

Step 6: Create Simple PHP API

request_data.php

<?php
  
    header('Access-Control-Allow-Origin: *');  
  
    if (move_uploaded_file($_FILES["file"]["tmp_name"], "media/".$_FILES['file']['name'])) {
        echo "Good Luck Your File Successfully done";
        exit;
    }
    echo "failed";
  
?>

sudo npm run serve

Web Programming Tutorials Example with Demo

Read :

READ : Auto Post Tweets on Twitter via API Using PHP

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue js Axios PHP File Upload Example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Post Views: 314

Vue js Axios PHP File Upload Example