<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>upload file using vue js ASP.NET Core</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form asp-action="Upload_File"
asp-controller="FileUpload"
method="post"
enctype="multipart/form-data">
<div style="min-height:1000px" id="app">
<section class="forms">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header d-flex align-items-center">
<h3 class="h4">File Upload</h3>
</div>
<div class="card-body">
<p>Upload </p>
<div class="form-group">
<input id="files" type="file" name="files" class="form-control-file">
</div>
<div class="form-group">
<input type="button" value="Upload" v-on:click="Upload()" class="btn btn-primary">
</div>
Url: {{UrlPath}}
<br />
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</form>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
filenames: [],
UrlPath: ''
},
methods: {
Upload: function () {
var fileUpload = $("#files").get(0);
var files = fileUpload.files;
var data = new FormData();
data.append(files[0].name, files[0]);
var current = this;
$.ajax({
type: "POST",
url: "/FileUpload/Upload_File",
contentType: false,
processData: false,
data: data,
async: false,
success: function (message) {
current.UrlPath = message;
},
error: function () {
alert("Error!");
},
complete: function () {
}
});
}
}
})
</script