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 相关文章推荐
js查错流程归纳
May 04 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
jquery获取节点名称
Apr 26 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
Element Badge标记的使用方法
2020/07/27 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python中的装饰器详解
2015/04/13 Python
python 爬取微信文章
2016/01/30 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python中的self用法详解
2019/08/06 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
高中生的自我评价
2014/03/04 职场文书
客房部经理岗位职责
2015/02/02 职场文书
小学班主任个人总结
2015/03/03 职场文书
工作经历证明范本
2015/06/15 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
如何优化vue打包文件过大
2022/04/13 Vue.js