আজকে আপনাদের সাথে শেয়ার করতেছি Vue JS এবং php দিয়ে প্রোগ্রেস বার সহ ফাইল আপলোডের টিউটোরিয়ালের সোর্স কোড 

upload.php

<?php
    header('Access-Control-Allow-Origin: *'); 
    header('Content-type: application/json');
    
    //no validation. You should validate something before uploading. 
    // e.g. file extension, file size, file already exists or not  etc
    // file upload allowed on server with max size greater than 2MB.
    
    $res = [];
    
    
     
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        $res["message"] =  "The file " . basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
        $res["uploadedUrl"] = $target_file;
    } else {
        $res["message"] =  "Sorry, there was an error uploading your file.";
    }

    echo json_encode($res);
    die();

main app div:

	<div id="app">
		<h1>Normal file upload</h1>
		<form action="http://rimonbd.com/fileupload/upload.php" method="post" enctype="multipart/form-data">
			<label>Select File</label>
			<input type="file" name="fileToUpload" id="fileToUpload"> <br> <br>
			<button type="submit">Upload Now</button>
			
		</form>
		<br><hr><br>
		<h1>File upload with progressbar</h1>

		<label>Select File</label>
		<input type="file" name="fileToUpload1" id="fileToUpload1"> <br> <br>
		<progress :value="percent" max="100"> </progress> % {{percent}}
		<br><br>
		{{message}}	
		<br><br>
		<button @click="upload();">Upload Now</button>

	</div>

script:

		var app = new Vue({
			el: "#app",
			data: {
				percent: 0,
				message: ""
			},
			mounted: function () {
				console.log("mounted...");
			},

			methods: {
				upload: function(){
					var _this = this;
					var elmnt = document.getElementById("fileToUpload1");
					console.log(elmnt.files[0]);
					var fd = new FormData();

					fd.append("fileToUpload", elmnt.files[0], elmnt.files[0].name)

					axios.post("http://rimonbd.com/fileupload/upload.php", fd, {
						onUploadProgress: function(uploadEvent){
								
								_this.percent = Math.round((uploadEvent.loaded / uploadEvent.total)*100);
							}
						})
						.then(function(res){
							console.log(res);
							_this.message = res.data.message;
						})
						.catch(function(e){
							console.log(e);
						});
				}
			}
		});