上传文件前端代码如下：

 <!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. C-order/Fortran-order（Row-/Column-major order）

    1. row-major / column-major order 无论是行序优先还是列序优先,其实在计算机计算中,指的都是在线性空间(linear storage,如 RAM,也即连续内存存储 co ...

  2. vue,js 使用中报错 TypeError: Cannot read property '__ob__' of undefined

    原因: data中没有加return 切记!切记!

  3. 一组西门子S7 报文

    03 00 00 16 11 E0 00 00 00 01 00 C1 02 10 00 C2 02 03 01 C0 01 0A(第一次握手报文) 03 00 00 16 11 D0 00 01 0 ...

  4. node lesson4--eventproxy不懂

    var express = require('express'); var superagent = require('superagent'); var cheerio = require('che ...

  5. TCP 和 UDP 的区别

    参考:http://blog.csdn.net/li_ning_/article/details/52117463 TCP与UDP区别总结: 1.TCP面向连接(如打电话要先拨号建立连接);UDP是无 ...

  6. Frequentist 观点和 Bayesian 观点

    1. Frequentist view Frequentist approach views the model parameters as unknown constants(未知的常数,而不是一个 ...

  7. .NET内置的Ajax工作原理

    在期望不执行回发(postback)而从客户端运行服务器代码的情况下,可以使用ClientScriptManager类来调用客户端回调(callback).这称为对服务器执行带外回调.在客户端回调中, ...

  8. Windows下一个curl使用

    一.简介 在上一篇中我们涉及到了一个在Ubuntu下使用的curl命令,而且使用这个命令来模拟server的功能来向谷歌的C2DMserver发送数据. 以下简单的来说下在Windows下相同的使用c ...

  9. 在Linux下使用MinGW静态交叉编译带有zlib的libcurl（包括交叉编译openssl，即--cross-compile-prefix=i686-w64-mingw32- mingw）

    在Linux下使用MinGW静态交叉编译带有zlib的libcurl libcurl是一个跨平台的.易用的.强大的网络库.在大部分Linux发行版中都有编译好的二进制包可供使用,Mac系统更是将其作为 ...

  10. 记一次虚拟化环境下Windows IO性能的解析

    前言随着云计算技术与服务的发展和进步,越来越多的客户选择将业务部署到云端.但由于引入了虚拟化层,在业务部署过程中经常会遇到IO问题,通常也不易调试.本文主要介绍利用perf.systemtap等工具, ...