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

2019-11-19 15:42:46

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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);    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Angularjs实现下拉框联动的示例代码

下一篇：node中koa中间件机制详解