近期在做文件上传的功能时遇到了一些问题，然后使用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的内容格式。
看到这里就结束啦，如果错误的地方欢迎批评与指正！觉得还不错话，请留下你们大大的赞👍👍！！！
