上传文件前端代码如下：

 <!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. 恩布拉科业务IM 1.8 版本号，内部沟通软件

    恩布拉科业务IM,开源企业IM,免费企业即时通讯,内部沟通平台,Entboost通告v1.8版本号,主要版本更新: 管理中心添加系统监控.集群管理二大功能模块:添加云盘空间.离线消息.文件大小等參数配 ...

  2. rabbitmq集群 + Mirror Queue + 使用C#

    搭建高可用的rabbitmq集群 + Mirror Queue + 使用C#驱动连接 我们知道rabbitmq是一个专业的MQ产品,而且它也是一个严格遵守AMQP协议的玩意,但是要想骚,一定需要拿出高 ...

  3. 1.开始第一个MVC项目

    安装就不说了 1.在指定路径创建好项目文件夹之后,打开cmd,进去这个文件夹路径下 输入命令 dotnet new mvc 就会在文件夹内创建一个mvc项目 2.创建好项目之后 直接在这个路径下输入 ...

  4. 从hadoop 要删除字符串匹配指定的任务

    我们都知道,假设 hadoop job -list 获取当前正在执行的hadoop 任务,返回的结果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  5. the solution about &quot;messy code&quot; in elicpse

    I use the Elicpse IDE to develope the ansdroid app.Sometime encounter the messy code in the Elicpse ...

  6. Http请求格式（在Linux下使用telnet亲测，通过这篇我才明白）

    命令行窗口中用telnet测试HTTP协议请求消息格式响应消息格式1. 命令行窗口中用telnet测试HTTP协议 HTTP消息是由普通ASCII文本组成.消息包括消息头和数据体部分.消息头以行为单位 ...

  7. C#（WPF）为Grid添加实线边框。

    原文:C#(WPF)为Grid添加实线边框. 相信大家在做WPF项目的时候,都会用到Grid这个布局控件,一般情况下,如果只是为了布局,那就不需要显示它的边框,但是也有特殊需求,如果把它当做表格来使用 ...

  8. 如何清除XP的网络共享密码

    一.利用NET命令 我们知道在Windows XP中提供了“net user”命令,该命令可以添加.修改用户账户信息,其语法格式为: net user [UserName [Password | *] ...

  9. JS 扩展方法prototype

    通过类对象的prototype设置扩展方法,下面为String对象增加quote(两边加字符)方法 <script type="text/javascript"> St ...

  10. 【转】关于在.Net开发中使用Sqlite的版本选择问题

    如果一个.NET应用要自适应32位/64位系统,只需要在项目的“目标平台”设置为“Any CPU”.但是如果应用中使用了SQLite,情况就不同了. SQLite的.NET开发包来自是System.D ...