Vue axios 中提交表单数据(含上传文件)


Posted in Javascript onJuly 06, 2017

我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作.

当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <form method="post" action="/upload" enctype="multipart/form-data">
      <input type="text" name="name" value="" placeholder="请输入用户名">
      <input type="text" name="age" value="" placeholder="请输入年龄">
      <input type="file" name="uploadFile">
      <input type="submit" value="提交">
    </form>
  </body>
</html>

这种方式可以提交,那么问题来了,表单提交以后如果需要获取服务器的响应呢,如果需要在响应成功后跳转页面呢,这种方式显得不好处理.

切回正题,在vue中这种简单的表单提交如何处理呢,其实使用的是 FormData 来模拟表单提交

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
</head>

<body>
  <form>
    <input type="text" value="" v-model="name" placeholder="请输入用户名">
    <input type="text" value="" v-model="age" placeholder="请输入年龄">
    <input type="file" @change="getFile($event)">
    <button @click="submitForm($event)">提交</button>
  </form>

  <script>
    window.onload = function () {
      Vue.prototype.$http = axios;
      new Vue({
        el: 'form',
        data: {
          name: '',
          age: '',
          file: ''
        },
        methods: {
          getFile(event) {
            this.file = event.target.files[0];
            console.log(this.file);
          },
          submitForm(event) {
            event.preventDefault();
            let formData = new FormData();
            formData.append('name', this.name);
            formData.append('age', this.age);
            formData.append('file', this.file);

            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }

            this.$http.post('/upload', formData, config).then(function (res) {
              if (res.status === 2000) {
                /*这里做处理*/
              }
            })
          }
        }
      })
    }
  </script>
</body>

</html>

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

Javascript 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 #Javascript
详解微信小程序Radio选中样式切换
Jul 06 #Javascript
Node.js 回调函数实例详解
Jul 06 #Javascript
详解vue渲染从后台获取的json数据
Jul 06 #Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 #Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 #Javascript
vue-cli如何添加less 以及sass
Jul 06 #Javascript
You might like
PHP实现的DES加密解密实例代码
2016/04/06 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Array对象方法参考
2006/10/03 Javascript
表单内同名元素的控制
2006/11/22 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python实现类继承实例
2014/07/04 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python实现Decorator模式实例代码
2018/02/09 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
给老婆的婚前保证书
2014/02/01 职场文书
教师师德演讲稿
2014/05/06 职场文书
员工工作表扬信
2015/05/05 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Python合并多张图片成PDF
2021/06/09 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js