form表单中的enctype 属性以及post请求里Content-Type方式

对于form表单中的enctype 属性之前理解的一般，就知道是类似于一种编码形式。后来公司做一个form表单提交数据的时候，重点是这个form表单里有文件上传，而我又要用vue来模拟form表单提交，这个时候我就是需要设置表头 。一直报错，发现原来没有向后台post请求是需要传送“multipart/form-data”，

当action为post且Content-Type类型是multipart/form-data，浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者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) {
                /*这里做处理*/
              }
            })
          }

 

后来参考网站：http://www.jb51.net/article/118051.htm

https://www.cnblogs.com/cjh1111/p/7017295.html

https://www.cnblogs.com/52fhy/p/5436673.html

定义和用法

form表单中enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

enctype有三个属性application/x-www-form-urlencoded，multipart/form-data，text/plain

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。值：application/x-www-form-urlencoded  描述：在发送前编码所有字符（默认），值：multipart/form-data  描述：

不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。值：text/plain  描述：空格转换为 "+" 加号，但不对特殊字符编码。

https://www.cnblogs.com/cjh1111/p/7017295.html

可能平时不注重，开发项目的时候却出现不少问题，这里我就说一下，如果表单提交和平时的有什么不一样的时候，报错八九不离十就是新的需求导致的，多思考，多找原因，一定要上网多查文档资料，学习也是这样，一直不断的复习，不断的查漏补缺！然后总结到位，慢慢成为专家