如何将Uppy上传文件的修改文件名传递至服务器？

问题原因 #

你在onBeforeFileAdded中修改了文件对象的name字段，但Uppy的XHRUpload组件默认不会直接将这个name作为上传到服务器的文件名。控制台显示的是Uppy内部管理的文件信息，但实际上传流程中，组件可能仍使用原始文件名，或者需要通过meta属性指定上传文件名。另外你的XHRUpload配置存在语法错误（endpoint后缺少逗号），这也可能影响功能正常运行。

修复步骤 #

1. 先修复语法错误 #

修改XHRUpload配置，在endpoint后添加逗号：

.use(XHRUpload, {
    endpoint: uploadUrl, // 补上缺失的逗号
    fieldName: 'my_file',
    limit: limit,
    headers: {
        'clientResize': clientResizeEnabled.toString()
    }
})

2. 修改文件的meta.filename属性 #

在onBeforeFileAdded中，同时修改文件的name和meta.filename，XHRUpload会优先使用meta.filename作为上传文件名：

onBeforeFileAdded: (currentFile, files) => {
    console.log(currentFile.data.lastModified);
    datePhotoTaken = currentFile.data.lastModified;
    const newFileName = currentFile.data.lastModified + ".jpg";
    const modifiedFile = {
        ...currentFile,
        name: newFileName,
        meta: {
            ...currentFile.meta,
            filename: newFileName // 指定上传用的文件名
        }
    }
    return modifiedFile
},

备选方案：自定义formData #

如果上述方法不生效，可以通过XHRUpload的formData函数手动构建表单数据，强制指定文件名：

.use(XHRUpload, {
    endpoint: uploadUrl,
    fieldName: 'my_file',
    limit: limit,
    headers: {
        'clientResize': clientResizeEnabled.toString()
    },
    formData: (file, meta) => {
        const formData = new FormData();
        // 手动添加文件，第三个参数即为上传到服务器的文件名
        formData.append('my_file', file.data, meta.filename || file.name);
        // 若有其他表单字段，可在此继续添加
        return formData;
    }
})

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