上传文件前端代码如下：

 <!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. 数据访问层之Repository

    数据访问层之Repository   接上文 项目架构开发:数据访问层之Logger 本章我们继续IRepository开发,这个仓储与领域模式里边的仓储有区别,更像一个工具类,也就是有些园友说的“伪 ...

  2. wpf设置设计时的ViewModel

    原文:wpf设置设计时的ViewModel wpf mvvm开发中,有些情况下,你的view不一定设置DataContext,但是你又想在设计阶段,能够自动提示你的view绑定的viewmodel的内 ...

  3. jieba（结巴）—— Python 中文分词

    学术界著名的分词器: 中科院的 ICTCLAS,代码并不十分好读 哈工大的 ltp, 东北大学的 NIU Parser, 另外,中文 NLP 和英文 NLP 不太一致的地方还在于,中文首先需要分词,针 ...

  4. 2 Task中的延续和7种阻塞

    1.wait using System; using System.Threading; using System.Threading.Tasks; namespace 多线程_List { clas ...

  5. 解决关于archlinux升级至3.16.1，Xorg桌面环境无法进入的问题

    [现象]有终端输入username,password后,桌面环境启动失败. [报错]log文件里显示: (EE) Fatal server error: (EE) xf86OpenConsole: V ...

  6. SQL语句中使用Group by

    参考经典文章:https://blog.csdn.net/liu_shi_jun/article/details/51329472 1.group by 分组 ,每一组数据只有一行,如果group b ...

  7. 机器学习: Tensor Flow +CNN 做笑脸识别

    Tensor Flow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库.节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数 ...

  8. 讨论IM软件“网上假货’

    概要 网上假货.在不能使用网络的情况下,IM软件还显示在线. 网上是假的"在线--当前离线"之间的状态,在这段时期.用户无法发送消息.用户可以创建假冒网上心跳的错觉(点击了解).缓 ...

  9. 微信小程序之登录页实例

    项目效果图: 目录结构: login.wxml: <view class="container"> <view class="login-icon&qu ...

  10. 【winows7+android-ndk-r9+Cygwin 】cocos2dx 2.*游戏移植Android平台完全手册

    为了有不少走的弯路.这里简要记录cocos2d开发环境的搭建.android开发环境搭建.android NDK环境搭建.终于实现cocos2dx 2.* 游戏Android平台移植. 转载请注明出处 ...