电商网站文件上传：无法修改input获取的JavaScript File对象名称

我正在为电商网站开发文件上传功能，使用<input type="file" id="file" accept=".jpg, .png, .jpeg, .svg, .jfif, pjpeg, pjp" multiple>标签获取FileList对象，但尝试修改其中File对象的文件名时失败了，希望将上传文件的名称修改为user_file{i}.extension格式。

HTML代码 #

<form id="form">
    <input type="text" id="title" placeholder="Product Name"><br>
    <input type="number" id="price" placeholder="Price"><br>
    <textarea id="description" placeholder="Description" name="description" rows="4" cols="50"></textarea><br>
    <input type="file" id="file" accept=".jpg, .png, .jpeg, .svg, .jfif, pjpeg, pjp" multiple><br>
    <button type="submit">Upload File</button>
</form>

JS代码 #

const button = document.querySelector("form").addEventListener('submit',(e)=>{
    e.preventDefault();
    let userFiles = document.getElementById("file").files;
    
    let i = 1;
    for (let element of userFiles) {
        // console.log(element.type)
        let extension = element.type.slice(6,element.type.length+1);
        console.log("user_file"+i+"."+extension);
        element.name = "user_file"+i+"."+extension;
        console.log(element["name"]);
        i++;
    }
});

问题核心是File对象的name属性是只读的，无法直接修改原File对象的名称。要实现自定义文件名，需要通过File构造函数创建新的File对象，保留原文件的内容、类型等元数据，仅替换文件名。

修改后的JS代码如下：

document.querySelector("form").addEventListener('submit',(e)=>{
    e.preventDefault();
    const userFiles = document.getElementById("file").files;
    const modifiedFiles = [];
    
    let i = 1;
    for (const file of userFiles) {
        // 从文件类型中提取扩展名，比如"image/jpeg"提取"jpeg"
        const extension = file.type.split('/')[1];
        const newFileName = `user_file${i}.${extension}`;
        
        // 创建新的File对象，复制原文件内容、类型，使用新文件名
        const modifiedFile = new File([file], newFileName, {
            type: file.type,
            lastModified: file.lastModified
        });
        
        modifiedFiles.push(modifiedFile);
        console.log(modifiedFile.name); // 输出修改后的文件名
        i++;
    }

    // 后续上传处理：将修改后的文件加入FormData
    const formData = new FormData();
    // 添加文件
    modifiedFiles.forEach(file => {
        formData.append('files', file);
    });
    // 添加其他表单字段
    formData.append('title', document.getElementById('title').value);
    formData.append('price', document.getElementById('price').value);
    formData.append('description', document.getElementById('description').value);

    // 示例：发起上传请求
    // fetch('/your-upload-api', {
    //     method: 'POST',
    //     body: formData
    // })
    // .then(res => res.json())
    // .then(data => console.log('上传成功:', data))
    // .catch(err => console.error('上传失败:', err));
});

关键说明 #

• File构造函数用法：new File(blobParts, fileName, options)，其中blobParts传入原File对象（File继承自Blob），fileName设置自定义名称，options保留原文件的类型和修改时间，保证文件元数据完整。
• 扩展名提取优化：用file.type.split('/')[1]替代slice，避免因类型字符串长度变化导致提取错误，兼容性更可靠。
• 上传处理：必须使用新创建的File对象构建FormData，原FileList中的对象无法修改名称，上传时不会生效。

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