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 相关文章推荐
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue实现学生信息管理系统
May 30 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
JavaScript实现消消乐的源代码
Jan 12 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
终于听上了直流胆调频
2021/03/02 无线电
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
django实现用户注册实例讲解
2019/10/30 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
优秀员工年终发言演讲稿
2014/01/01 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
技术转让协议书
2016/03/19 职场文书
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS