$.ajax下Form表单提交文件名存在空格处理

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" 覆盖
})