Vuejs Vue CLI File Upload with Axios and PHP

Vuejs Vue CLI File Upload with Axios and PHP

Install vue-axios

npm install --save axios vue-axios

https://www.npmjs.com/package/vue-axios

C:\vuejs\myapp>npm install --save axios vue-axios

C:\vuejs\myapp>npm run serve

src/main.js

?

1 2 3 4 5 6 7 8 9 10

//src/main.js import { createApp } from 'vue' import App from './App.vue'   import axios from 'axios' // C:\vuejs\myapp>npm install --save axios vue-axios   import VueAxios from 'vue-axios'     createApp(App).use(VueAxios, axios).mount('#app')

src/components/fileUpload.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

//src/components/fileUpload.vue <template>   <div class="container">     <div class="row">       <h1>Vuejs Vue CLI File Upload with Axios and PHP</h1>       <label>File         <input type="file" id="file" ref="file"/>       </label>         <button v-on:click="uploadFile()">Upload</button>     </div>   </div> </template>   <script>     export default  {         data () {       return {                    file:''       }        },     methods: {                   uploadFile: function(){                    this.file = this.$refs.file.files[0];                                   let formData = new FormData();                  formData.append('file', this.file);                  this.$refs.file.value = '';                 this.axios.post('http://localhost/devtest/upload.php', formData,                 {                     headers: {                         'Content-Type': 'multipart/form-data'                     }                 })                 .then(function (response) {                       if(!response.data){                         alert('File not uploaded.');                     }else{                         alert('File uploaded successfully.');                                              }                   })                 .catch(function (error) {                     console.log(error);                  });               }     },       } </script>

src/App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//src/App.vue <template>   <div id="app">       <FileUpload/>   </div> </template> <script> import FileUpload from './components/fileUpload.vue'          export default {                  name: 'app',                        components: {                              FileUpload                 }        } </script>

upload.php

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//upload.php <?php      header('Access-Control-Allow-Origin: *');       $filename = $_FILES['file']['name'];      $allowed_extensions = array('jpg','jpeg','png','pdf');       $extension = pathinfo($filename, PATHINFO_EXTENSION);        if(in_array(strtolower($extension),$allowed_extensions) ) {               if(move_uploaded_file($_FILES['file']['tmp_name'], "upload/".$filename)){                 echo 1;           }else{               echo 0;           }     }else{         echo 0;     } ?>