近期在做文件上传的功能时遇到了一些问题，然后使用axios+formData 解决，axios支持IE8+，但原理是基于promise之上实现的，因此会存在不兼容IE的问题。，故选择使用原生ajax+formData，使用方式有些许区别，各位小伙伴请注意！

文件

var formData = new FormData();
formData.append('file', file); // 第二个参数为具体某个文件

上传文件axios+formData

axios({
  url: 'xxx/upload',
  method: 'post',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }, // 区别之处
  data: formData.get('file') // 区别之处,且get方法不兼容IE浏览器
}).then(res => {
  console.log('res', res);
});

上传文件原生ajax+formData

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://qa.file.internal.weimob.com/media/upload');

// xhr.send(formData.get("file")); 此方法错误
xhr.send(formData); // 区别之处
xhr.onreadystatechange = function() {
  if (xhr.status === 200 && xhr.readyState === 4) {
  var res = JSON.parse(xhr.responseText);
  console.log('res', res);
}
};

下面来拓展一下FormData和Content-Type

FormData

var formData = new FormData(myForm); // 通过构造函数生成一个formData实例

FormData 提供以下实例方法。

FormData.get(key) // 获取指定键名对应的键值，参数为键名。如果有多个同名的键值对，则返回第一个键值对的键值。
FormData.getAll(key) // 返回一个数组，表示指定键名对应的所有键值。如果有多个同名的键值对，数组会包含所有的键值。
FormData.set(key, value) // 设置指定键名的键值，参数为键名。如果键名不存在，会添加这个键值对，否则会更新指定键名的键值。如果第二个参数是文件，还可以使用第三个参数，表示文件名。
FormData.delete(key) // 删除一个键值对，参数为键名。
FormData.append(key, value) // 添加一个键值对。如果键名重复，则会生成两个相同键名的键值对。如果第二个参数是文件，还可以使用第三个参数，表示文件名。
FormData.has(key) // 返回一个布尔值，表示是否具有该键名的键值对。
FormData.keys() // 返回一个遍历器对象，用于for...of循环遍历所有的键名。
FormData.values() // 返回一个遍历器对象，用于for...of循环遍历所有的键值。
FormData.entries() // 返回一个遍历器对象，用于for...of循环遍历所有的键值对。如果直接用for...of循环遍历 FormData 实例，默认就会调用这个方法。

Content—Type

例如： Content-Type: text/html;charset:utf-8;
 
常见的媒体格式类型如下：
    text/html ： HTML格式
    text/plain ：纯文本格式      
    text/xml ：  XML格式
    image/gif ：gif图片格式    
    image/jpeg ：jpg图片格式 
    image/png：png图片格式
    
以application开头的媒体格式类型：
   application/xhtml+xml：XHTML格式
   application/xml：XML数据格式
   application/atom+xml：Atom XML聚合格式    
   application/json：JSON数据格式
   application/pdf：pdf格式  
   application/msword：Word文档格式
   application/octet-stream：二进制流数据（如常见的文件下载）
   application/x-www-form-urlencoded： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
   另外一种常见的媒体格式是上传文件之时使用的：
   
multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

以上就是我们在日常的开发中，经常会用到的若干content-type的内容格式。

看到这里就结束啦，如果错误的地方欢迎批评与指正！觉得还不错话，请留下你们大大的赞👍👍！！！