如何通过Uppy Dashboard为整批上传添加全局自定义元数据？

当然可以实现，不需要依赖独立的form插件，以下是两种常用的实现方式：

方法1：文件添加后批量设置元数据 #

监听Uppy的files-added事件，在用户选择文件后，通过自定义交互（比如弹出表单）收集批量元数据，再循环赋值给所有选中的文件：

const uppy = Uppy.Core()
  .use(Uppy.Dashboard({
    inline: true,
    target: '#uppy-container'
  }));

uppy.on('files-added', (files) => {
  // 这里可以替换为自定义表单弹窗，收集用户输入的批量元数据
  const batchMeta = {
    project: '电商项目V2',
    uploader: '张三'
  };

  // 为每个文件设置统一的元数据
  Object.keys(files).forEach(fileId => {
    uppy.setFileMeta(fileId, batchMeta);
  });
});

方法2：在Dashboard内置全局表单字段 #

利用Dashboard的metaFields配置项添加全局表单，然后在上传开始前，将这些全局字段的值同步到所有文件的元数据中：

const uppy = Uppy.Core()
  .use(Uppy.Dashboard({
    inline: true,
    target: '#uppy-container',
    // 添加全局元数据输入字段
    metaFields: [
      { id: 'projectId', name: '项目ID', placeholder: '请输入项目唯一ID' },
      { id: 'tag', name: '文件标签', placeholder: '用逗号分隔多个标签' }
    ]
  }));

// 上传开始前，将全局表单的元数据同步到所有文件
uppy.on('upload-start', () => {
  const globalMeta = uppy.getState().meta;
  const allFiles = uppy.getFiles();

  allFiles.forEach(file => {
    uppy.setFileMeta(file.id, {
      ...file.meta,
      ...globalMeta
    });
  });
});

这两种方式都能实现整批上传的自定义元数据添加，完全不需要依赖form插件，而且可以和Dashboard完美配合。

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