上传文件前端代码如下：

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

            {

                //设置文件名

                fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[].FileName);

                //保存文件

                files[].SaveAs(Server.MapPath("~/Uploads/" + fileNewName));

                Thread.Sleep( * );

            }

            return Json(new { msg = "上传成功", newfilename = fileNewName }, JsonRequestBehavior.AllowGet);

        }

vue.js异步上传文件前后端代码的更多相关文章

  1. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  2. 关于js异步上传文件

    好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...

  3. JS异步上传文件

    直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...

  4. Node.js——异步上传文件

    前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...

  5. 关于JQuery.form.js异步上传文件点滴

    好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...

  6. 科普文：Node.js 如何上传文件到后端服务【转】

    原文链接 https://www.yuque.com/egg/nodejs/httpclient-upload 背景 互联网时代,无数服务是基于 HTTP 协议进行通信的. 除了常见的 前端浏览器 - ...

  7. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  8. Asp.Net Mvc异步上传文件的方式

    今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...

  9. js能否上传文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

随机推荐

  1. WPF中MVVM模式的 Event 处理

    WPF的有些UI元素有Command属性可以直接实现绑定,如Button 但是很多Event的触发如何绑定到ViewModel中的Command呢? 答案就是使用EventTrigger可以实现. 继 ...

  2. Linux Sed技巧

    删除行首空格 sed 's/^[ ]*//g' filename sed 's/^*//g' filename sed 's/^[[:space:]]*//g' filename 匹配行前或后添加空白 ...

  3. UITextField设置leftView的Insets

    Insets就是css中的padding 我们给UITextField设置了leftView,目的是在文本输入框左側显示一个图标.可是在ios7里,这个图标会紧紧地挨着TextField的左边框,非常 ...

  4. [MVVM Light]Messenger 的使用

    原文:[MVVM Light]Messenger 的使用 当我们使用MVVM开发模式进行开发时,ViewModel之间的通信常常是很头疼的事情,好在MVVM Light提供了Messenger类可以轻 ...

  5. Robot Framework 快速入门_英文版

    Copyright © Nokia Siemens Networks 2008 Licensed under the Apache License, Version 2.0 Table of Cont ...

  6. Windows系统时间(FILETIME和SYSTEMTIME)

    转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8654298 欢迎关注微博:http://weibo.com/MoreWi ...

  7. WPF 透明掩码 OpactiyMask

    原文:WPF 透明掩码 OpactiyMask 在WPF中提供了Opacity属性使得元素的所有内容都是透明的.而OpacityMask属性可以使元素的特定区域变成透明. OpacityMask属性接 ...

  8. 【codeforces】Codeforces Round #277 (Div. 2) 解读

    门户:Codeforces Round #277 (Div. 2) 486A. Calculating Function 裸公式= = #include <cstdio> #include ...

  9. Shell脚本入门学习笔记

    1.shell操作系统和用户之间.负责解释命令行 2./etc/shells 记录登录系统有效支持shell 3./etc/passwd 最后,有人谁可以看到用户的默认shell 4.直接输入shel ...

  10. ios 时间戳 当前时间 相互转化

    1.今天在做一个webservice的接口的时候,被要求传一个时间戳过去,然后就是开始在Google上找 2.遇到两个问题,一,当前时间转化为时间戳,二,获取的当前时间和系统的时间相差8个小时 一,转 ...