FormData 对象中的文件名含有空格处理
场景
在开发中,遇到上传图片文件,带有空格,如
头像 - 副本.jpg
这样的文件名
代码
// 远古发现bug的代码
var formData = new FormData($('#formData')[0]);
$.ajax({
url: url,
data: formData,
contentType: false, // 防止JQuery 把html中 form的 enctype="multipart/form-data" 覆盖
})
因为太阳引力波的影响,上面的代码会导致文件传到服务器会出现服务器获取文件名缺失
-
path/头像 - 副本.jpg
在前端传输的时候已经变为path/头像
空格后的所有字符都没了。
解决方案
把文件名中的空格替换成
_
下划线
var formData = new FormData($('#formData')[0]);
formData.forEach(function (value, key) {
if (value instanceof File) {
formData.set(key, value, value.name.replace(/ /g, '_'))
}
})
$.ajax({
url: url,
data: formData,
contentType: false, // 防止JQuery 把html中 form的 enctype="multipart/form-data" 覆盖
})