vue.js异步上传文件前后端代码
上传文件前端代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <meta charset="utf-8" />
7 <script src="../js/vue.js"></script>
8 <script src="../js/vue-resource.js"></script>
9 <script src="../asset/js/jquery.js"></script>
10
11 </head>
12 <body>
13 <div >
14 <input type="file" @change="getFile($event)" /><button @click="upload">上传</button>
15 <div>{{ result }}</div>
16 <div v-show="uping==1">正在上传中</div>
17 </div>
18
19 <script>
20 new Vue({
21 el: '#app',
22 data: {
23 upath: '',
24 result: '',
25 uping:0
26 },
27 methods: {
28 upload: function () {
29 //console.log(this.upath);
30 var zipFormData = new FormData();
31 zipFormData.append('filename', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
32 let config = { headers: { 'Content-Type': 'multipart/form-data' } };
33 this.uping = 1;
34 this.$http.post('http://localhost:42565/home/up', zipFormData,config).then(function (response) {
35 console.log(response);
36 console.log(response.data);
37 console.log(response.bodyText);
38
39 var resultobj = response.data;
40 this.uping = 0;
41 this.result = resultobj.msg;
42 });
43 },
44
45 getFile: function (even) {
46 this.upath = event.target.files[0];
47 },
48 }
49 });
50 </script>
51 </body>
52 </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);
}