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
//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
//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
//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
//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;
}
?>
