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 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
微信小程序 教程之引用
Oct 18 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python with语句的原理与用法详解
2020/03/30 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
人工作失职检讨书
2015/05/05 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android