vue.js异步上传文件前后端实现代码


Posted in Javascript onAugust 22, 2017

本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下

上传文件前端代码如下:

<!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 > 0)
      {
        //设置文件名
        fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName);
        //保存文件
        files[0].SaveAs(Server.MapPath("~/Uploads/" + fileNewName));
        Thread.Sleep(10 * 1000);
      }
      return Json(new { msg = "上传成功", newfilename = fileNewName }, JsonRequestBehavior.AllowGet);
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
node中koa中间件机制详解
Aug 22 #Javascript
理解javascript async的用法
Aug 22 #Javascript
React Native之TextInput组件解析示例
Aug 22 #Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 #Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 #Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 #Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 #Javascript
You might like
终于听上了直流胆调频
2021/03/02 无线电
利用PHP动态生成VRML网页
2006/10/09 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
canvas绘制多边形
2017/02/24 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python配置grpc环境
2019/01/01 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python向excel中写入数据的方法
2019/05/05 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
解决Python使用列表副本的问题
2019/12/19 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
世界环境日活动总结
2015/02/11 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
MySQL 逻辑备份 into outfile
2022/05/15 MySQL