怎么请求小程序直播_Vue axios 中提交表奇数据(含

发布时间:2021-01-11 16:24 作者:jianzhan

摘要: Vue axios 中递交表格数据信息(含提交文档) 大家常常应用表格来提交数据信息,及其提交文档,那麼如何在表格递交取得成功的情况下接纳网络服务器的响应,并且做好出相对实际操作

Vue axios 中提交表单数据(含上传文件)       本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件),具有一定的参考价值,有兴趣的可以了解一下

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

当然使用一般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="vue/2.3.4/vue.js" /script 
 script src="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 

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


  • 凡科抠图怎么设计拳击小

    ps如何设计方案拳击小握拳pk的图型? 公布 创作者:lmyceyi999 我想评价ps如何设计方案拳击小握拳pk的图型?ps中要想设计方案一个pk的标志,该如何设计方案呢?下边大家就看来看应

  • 手机微信微信小程序吃掉

    原题目:手机微信微信小程序吃掉H5?听听第一批检测的开发设计者如何说 微信小程序要变为当之无愧的访问器了,但是依然有许多限定。 文 | 孙然 深更半夜23:27,电子商务微信小程

  • 假如想自主创业,手机微

    具体上手机微信微信小程序虽然并不是错,但是也要针对不一样人群不一样生产制造制造行业,其实不是每个生产制造制造行业都合适。 一些生产制造制造行业合理处大,一些生产制造

  • 手机微信微信小程序程序

    八月21日,第一届全国性青少年儿童手机微信微信小程序程序编写艺术创意营入选名册发布,由39名中学生构成的14支微信小程序员团队进到总决赛,将参加手机微信官方网机构的“两天

  • KTV微信小程序必须什么作

    手机微信微信小程序日渐受欢迎,美容护肤美容制造行业都不想忽略这一出风口,竞相参加微信小程序开发设计。 那麼美容护肤美容制造行业开发设计手机微信微信小程序有哪些益处呢