文件上传时修改e.target.files的文件名追加字符串报错如何解决

错误原因 #

浏览器规范中File接口的name属性是只读属性，仅暴露getter没有setter，直接修改原生File实例的name属性就会触发你遇到的报错。

可行实现方案 #

你可以基于原有File实例创建新的自定义File对象，指定自定义的文件名即可：

document.querySelector('#document-upload').addEventListener('change', (e) => {
    const selectedFiles = e.target.files;
    const appendStr = 'test'; // 你要追加的自定义字符串
    for (let i = 0; i < selectedFiles.length; i++) {
        const originalFile = selectedFiles[i];
        // 拆分原文件名的名称和后缀，避免把字符串追加到后缀后面
        const nameSegments = originalFile.name.split('.');
        let newFileName;
        if (nameSegments.length > 1) {
            // 有后缀的情况：文件名+追加串+.后缀
            const suffix = nameSegments.pop();
            newFileName = `${nameSegments.join('.')}${appendStr}.${suffix}`;
        } else {
            // 无后缀的情况直接追加
            newFileName = originalFile.name + appendStr;
        }
        // 新建File实例，传入原文件内容、新文件名、原文件的MIME类型
        const newFile = new File([originalFile], newFileName, {
            type: originalFile.type,
            lastModified: originalFile.lastModified
        });
        imagesArray.push(newFile);
    }
});

补充说明 #

• 该方案兼容所有现代浏览器，如果你需要兼容不支持File构造函数的旧环境，可以改用Blob配合自定义name字段、或在FormData提交阶段指定文件名
• 如果你是直接用FormData提交文件，可以跳过新建File的步骤，直接在append方法的第三个参数传入自定义文件名：

const formData = new FormData();
// 第三个参数直接指定上传的文件名即可
formData.append('upload_file', originalFile, newFileName);

内容的提问来源于stack exchange，提问作者zyyyzzz