上传文件前端代码如下：

 <!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 实现繁花曲线

    原文:WPF 实现繁花曲线 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/nihang1234/article/details/83346919 X ...

  2. 【003】【Java虚拟机——对象死亡的判断】

    对象死亡! 垃圾收集器在对堆进行回收前,首先要做的事情就是要确定这些对象之中哪些还"存活"着, 哪些已经"死去＂ (即不可能再被不论什么途径使用的对象). 1)  引用计 ...

  3. Uniform synchronization between multiple kernels running on single computer systems

    The present invention allocates resources in a multi-operating system computing system, thereby avoi ...

  4. 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果

    原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图 ...

  5. sigsuspend sigprocmask函数的用法

    一个进程的信号屏蔽字规定了当前堵塞而不能递送给该进程的信号集.调用函数sigprocmask能够检測或更改其信号屏蔽字,或者在一个步骤中同一时候运行这两个操作. #include <signal ...

  6. Codeforces 458A Golden System

    经过计算两个字符串的大小对比 主要q^2=q+1 明明是斐波那契数 100000位肯定超LL 我在每一位仅仅取到两个以内 竟然ac了 #include<bits/stdc++.h> usi ...

  7. TCP网络通讯如何解决分包粘包问题（有模拟代码）

    TCP作为常用的网络传输协议,数据流解析是网络应用开发人员永远绕不开的一个问题. TCP数据传输是以无边界的数据流传输形式,所谓无边界是指数据发送端发送的字节数,在数据接收端接受时并不一定等于发送的字 ...

  8. [数字dp] hdu 3271 SNIBB

    意甲冠军:有两个查询: q=1.在[x,y]间隔,兑换b十进制,数字和m多少个月. q=2.在[x,y]间隔,兑换b十进制,数字是m第一k的数目是多少(十进制),没有输出由给定的主题. 思维: 和比特 ...

  9. 移花接木：借助 IViewLocationExpander 更换 ASP.NET Core View Component 视图路径

    端午节在家将一个 asp.net 项目向 asp.net core 迁移时遇到了一个问题,用 view component 取代 Html.RenderAction 之后,运行时 view compo ...

  10. GDI+ Bitmap与WPF BitmapImage的相互转换

    原文:GDI+ Bitmap与WPF BitmapImage的相互转换 using System.Windows.Interop; //... // Convert BitmapImage to Bi ...