Download or Include
axios
https://github.com/axios/axios
Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
VueJS
https://vuejs.org/v2/guide/installation.html
CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Axios upload file with PHP</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="vuejsuploadapp">
<br />
<h3 align="center">Vue.js Axios upload file with PHP</h3>
<br />
<div v-if="successAlert" class="alert alert-success alert-dismissible">
<a href="#" class="close" aria-label="close" @click="successAlert=false">×</a>
{{ successMessage }}
</div>
<div v-if="errorAlert" class="alert alert-danger alert-dismissible">
<a href="#" class="close" aria-label="close" @click="errorAlert=false">×</a>
{{ errorMessage }}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
<h3 class="panel-title">Upload File</h3>
</div>
<div class="col-md-6" align="right"></div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4" align="right">
<label>Select Image</label>
</div>
<div class="col-md-4">
<input type="file" ref="file" />
</div>
<div class="col-md-4">
<button type="button" @click="btnUpload" class="btn btn-success">Upload Image</button>
</div>
</div>
<br />
<br />
<div v-html="uploadedImage" align="center"></div>
</div>
</div>
</div>
<script>
var application = new Vue({
el:'#vuejsuploadapp',
data:{
file:'',
successAlert:false,
errorAlert:false,
uploadedImage:'',
},
methods:{
btnUpload:function(){
application.file = application.$refs.file.files[0];
var formData = new FormData();
formData.append('file', application.file);
axios.post('upload.php', formData, {
header:{
'Content-Type' : 'multipart/form-data'
}
}).then(function(response){
if(response.data.image == '') {
application.errorAlert = true;
application.successAlert = false;
application.errorMessage = response.data.message;
application.successMessage = '';
application.uploadedImage = '';
}else{
application.errorAlert = false;
application.successAlert = true;
application.errorMessage = '';
application.successMessage = response.data.message;
var image_html = "<img src='"+response.data.image+"' class='img-thumbnail' width='500' />";
application.uploadedImage = image_html;
application.$refs.file.value = '';
}
});
}
},
});
</script>
</body>
</html>
upload.php
//upload.php
<?php
$image = '';
if(isset($_FILES['file']['name']))
{
$image_name = $_FILES['file']['name'];
$valid_extensions = array("jpg","jpeg","png");
$extension = pathinfo($image_name, PATHINFO_EXTENSION);
if(in_array($extension, $valid_extensions)){
$upload_path = 'upload/' . time() . '.' . $extension;
if(move_uploaded_file($_FILES['file']['tmp_name'], $upload_path)){
$message = 'Image Succesfully Uploaded';
$image = $upload_path;
}else{
$message = 'There is an error while uploading image';
}
}else{
$message = 'Only .jpg, .jpeg and .png Image allowed to upload';
}
}else{
$message = 'Select Image';
}
$output = array(
'message' => $message,
'image' => $image
);
echo json_encode($output);
?>
