vue.js上传文件到后端

本文实例为大家分享了vue.js异步上传文件的具体代码，供大家参考，具体内容如下：1、上传文件前端代码如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>

vues

8252人浏览 · 2020-05-30 20:14:42

vues · 2020-05-30 20:14:42 发布

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

    }

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^