vue.js上传文件到后端_vue上传文件到后端

作者：菜鸟追梦旅行 | 2024-03-01 05:17:43

踩

vue上传文件到后端

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

1、上传文件前端代码如下：


<!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>

2、后端处理代码如下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);
 
    }

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/171237