form表单提交数据（包括文字和图片）实例

一般来说，form表单提交数据的方式，也就是请求数据到服务器是与传统利用路径api去get或post一个请求到服务器是不一样的，下面就来探讨下关于form表单提交数据至服务器到底是怎么实现的。

话不多说，上代码：

HTML部分：

        <form id="uploadForm" method="post" action="" enctype="multipart/form-data">
          <input type="hidden" name="uid" :value="uid" />
          <input type="hidden" name="token" :value="token" />
          <input v-if="textid != '' && textid != null" type="hidden" name="textid" :value="textid" />
          <input type="hidden" name="title" :value="dataList.title" />
          <input type="hidden" name="content" :value="dataList.content" />
          <input type="hidden" name="category" :value="dataList.category" />
          <input type="hidden" name="jump_type" :value="dataList.jump_type" />
          <input type="hidden" name="extra_id" :value="dataList.extra_id" />
          <input type="hidden" name="extra_type" :value="dataList.extra_type != '0' ? '1' : '0'" />
          <input type="hidden" name="publish_type" :value="dataList.publish_type" />
          <input type="hidden" name="publish_start" :value="dataList.publish_start" />
          <input type="hidden" name="person_type" :value="dataList.person_type" />
          <input type="hidden" name="image" value='[{"name":"cover","pos":13,"type":1,"prio":1}' />
          <div class="navWrapper">
            <ul @click="active_menu_index($event)">
              <li :class="active_idx == '1' ? 'active' : ''" idx="1">内容编辑</li>
              <li :class="active_idx == '2' ? 'active' : ''" idx="2">发送方式</li>
              <li :class="active_idx == '3' ? 'active' : ''" idx="3">发送范围</li>
            </ul>
          </div>
          <!-- 这里可以写任意的HTML标签元素，也可以写在form标签的外面 -->
        </form>

JS部分：

import "../../assets/js/plugin/jquery.form.min.js"
​
    data() {
      return {
        uid: '',
        textid: '',      
        dataList: {
          category: 0,
          jump_type: '0',
          person_type: '0',
          publish_type: 1,
        }
    },

​  // 更新优惠券信息
  updateCouponInfo: function(self){
    var option = {
      url: index.baseApiUrl + "?m=mvmtv&c=push&a=update",
      type: "POST",
      dataType: "json",
      success: function (res) {
        if (res.return.code == 0) {
          marketing_manage.callPromptBox(self,res.return.desc);
        }
      },
      error: function (res) {}
    };
    $("#uploadForm").ajaxSubmit(option);//最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交
    return false; 
  },

​

 

下面我来讲解下，form表单提交需要注意和学习的地方：

1.该实例是在vue环境里演示的，且请求方式为post；

2.在使用form表单提交数据的时候，必须先引用文件jquery.form.min.js，大家可自行百度下载；

3.用form表单提交数据的字段名就是form表单中每个input标签里的name属性的值，比如：form表单中的第一个input标签是这样的：

<input type="hidden" name="uid" :value="uid" />

意思就是在请求数据（请求数据一般都是要带参数的，用户id啊，条目id什么的，这个大家应该都知道吧）的时候，除了api路径之外，后面携带的参数就是形如www.csdn.com/index.php?uid=1。'?'前面的是请求路径，后面的uid就是第一个Input标签name属性的值'uid'，即name='uid'，而uid的值就是input标签的value属性的值，即value='uid'，后面这个uid是一个具体的值，前面的是参数名，不要弄混淆了。由于这里使用到了vue的数据双向绑定，这个uid的值是用户在登录系统的时候就存进cookie中的，是可以在cookie中获取到的。

下面解释下，这里为什么input标签中还有一个属性'type'，这个属性大家应该了解过了，它可以有很多的值，比如：'radio','checkbox','button'等很多，而这里取的值是'hidden'，意思是在HTML页面中不可见，但它是存在于页面当中的，是占有一定内存的。

但是一定要记住，在form表单中，不能同时存在一样的name值，也就是每个input标签的name属性值一定是唯一的，不然就像js一样，后面会把前面的覆盖掉；

4.其他要传的参数形式跟uid类似，照葫芦画瓢即可，可参考HTML中的代码。其中某些input标签里的value属性没有用到vue的数据双向绑定，是因为它就只有一个值，不会再发生变化；

5.现在来着重讲解下，图片是怎么上传上去的。其实吧，图片上传也是一样的，只是它有格式要求而已，一般来说，图片的上传格式是后台人员规定的，只需要按照后端人员的要求来即可；

6.上述引入的文件是为js代码请求做准备的，另外marketing_manage.callPromptBox();这个函数是我自己写的一个提示用户操作结果的函数，大家可不用引用，只需要在自己有需求的地方写自己的代码即可。

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------更新一下，附上常用的请求封装和参数封装

这里用JQuery请求的为例：

XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。

FormData对象的操作方法，全部在原型中，自己本身没任何的属性及方法。

它的使用：

let formData = new FormData();
formData.append('username','CharlesTian');
formData.append('password','123456');
formData.append('sex','boy');//添加sex键值对
formData.delete('sex');//删除sex键值对
$.ajax({
    type: 'POST',
    url: baseApiUrl,
    data: formData,
    processData: false,
    contentType: false,
}).success((res) => {
	console.log("成功")
})