vue.js异步上传文件前后端实现代码

来源：年旅网

本文实例为大家分享了vue.js异步上传文件的具体代码，供大家参考，具体内容如下

上传文件前端代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <meta charset="utf-8" />
 <script src="../js/vue.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script src="../asset/js/jquery.js"></script>

</head>
<body>
 <div id="app">
 <input type="file" @change="getFile($event)" /><button @click="upload">上传</button>
 <div>{{ result }}</div>
 <div v-show="uping==1">正在上传中</div>
 </div>

<script>
 new Vue({
 el: '#app',
 data: {
 upath: '',
 result: '',
 uping:0
 },
 methods: {
 upload: function () {
 //console.log(this.upath);
 var zipFormData = new FormData();
 zipFormData.append('filename', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
 let config = { headers: { 'Content-Type': 'multipart/form-data' } };
 this.uping = 1;
 this.$http.post('http://localhost:42565/home/up', zipFormData,config).then(function (response) {
 console.log(response);
 console.log(response.data);
 console.log(response.bodyText);
 
 var resultobj = response.data;
 this.uping = 0;
 this.result = resultobj.msg;
 });
 },

 getFile: function (even) {
 this.upath = event.target.files[0];
 },
 }
 });
</script>
</body>
</html>

后端处理代码如下asp.net mvc的：

public ActionResult Up()
 {
 string msg = string.Empty;
 string error = string.Empty;
 string result = string.Empty;
 string filePath = string.Empty;
 string fileNewName = string.Empty;
 var files = Request.Files;
 if (files.Count > 0)
 {
 //设置文件名
 fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName);
 //保存文件
 files[0].SaveAs(Server.MapPath("~/Uploads/" + fileNewName));
 Thread.Sleep(10 * 1000);
 }
 return Json(new { msg = "上传成功", newfilename = fileNewName }, JsonRequestBehavior.AllowGet);
 }