Vue js Axios File Upload using PHP

Today, We want to share with you Vue js Axios File Upload using PHP.In this post we will show you Uploading Files With VueJS and Axios, hear for File Upload using Vue js Axios PHP we will give you demo and example for implement.In this post, we will learn about multiple-file-uploads-with-vue js-and-laravel with an example.

Vue js Axios File Upload using PHP

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

As I will cover this Post with live Working example to develop vue js upload audio, video file, so the axios upload multiple files for this example is following below.

Read Also:  how to check install laravel version?
Vue js Axios File Upload using PHP
Vue js Axios File Upload using PHP

Step 1: Include Vue.js library

At first we need to include Vue.js Latest library file.1. Download & Include

(https://unpkg.com/axios/dist/axios.min.js).
<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Step 2: JavaScript/jQuery Source Code:

This file All the Data contains the following JavaScript/vuejs Source codes which calls liveServerUpload() method..

var app = new Vue({
  el: '#pakaShop',
  data: {
     file: "",
  },
  methods: {

     liveServerUpload: function(){

       this.file = this.$refs.file.files[0];

       let formData = new FormData();
       formData.append('file', this.file);

       axios.post('do_upload_files.php', formData,
       {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
       })
       .then(function (response) {

          if(!response.data){
             alert('Sorry File not uploaded.');
          }else{
             alert('Your Vuejs with PHP File uploaded successfully.');
          }

       })
       .catch(function (error) {
           console.log(error);
       });

     }
   }
})

Step 3: HTML Source Code:

This file contains the following HTML Markup Source codes.

Read Also:  PHP Automatic Flexify image resizing

<div id='pakaShop'>

   <input type="file" id="file" ref="file" />

   <button type="button" @click='liveServerUpload()' >Upload file</button>
</div>

Step 4: PHP Source Code

Following PHP Source codes are used for upload file with Vue.js and PHP.

do_upload_files.php

<?php

// your uploaded File name
$filename = $_FILES['file']['name'];

// simple assign Valid file extensions
$valid_extensions = array("jpg","jpeg","png","pdf");

// File extension check logic in PHP
$extension = pathinfo($filename, PATHINFO_EXTENSION);

// here Check extension logic in PHP
if(in_array(strtolower($extension),$valid_extensions) ) {

   //PHP To simple Upload file
   if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$filename)){
      echo 1;
   }else{
      echo 0;
   }
}else{
   echo 0;
}

exit;

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Ionic Side Menus - Side Menu and Navigation

Summary

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

I hope you get an idea about Vue js Axios File Upload using PHP.
I would like to have feedback on my Pakainfo.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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  crud with php oop and mvc design pattern
  2. Read Also:  Laravel Vuejs Ajax Validation Tutorial With Example
  3. Read Also:  delete Query In Codeigniter Example Tutorial
  4. Read Also:  vue Image Upload Component
  5. Read Also:  How to integrate whatsapp Api php for send and receive message in bulk
  6. Read Also:  access denied for user 'root'@'localhost' - Fix MySQL Error
  7. Read Also:  Vuejs File Type extension Validation
  8. Read Also:  Laravel Debugging Raw SQL Queries result
  9. Read Also:  Convert CSV File Into JSON using PHP
  10. Read Also:  How To Create Social Media icons footer using bootstrap?
CLOSEX