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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
js转换对象为xml
Feb 17 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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
ftp类(myftp.php)
2006/10/09 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
浅谈PHP的反射机制
2016/12/15 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
用Python写冒泡排序代码
2016/04/12 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
提升python处理速度原理及方法实例
2019/12/25 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
python的launcher用法知识点总结
2020/08/07 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
班组长的岗位职责
2013/12/09 职场文书
工地门卫岗位职责
2013/12/30 职场文书
二手房购房意向书范本
2014/04/01 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
基于Python实现股票收益率分析
2022/04/02 Python