当我们有多个 uppy 上传者时，如何为 Uppy 上传者分配（使用）输入名称答案

【问题标题】：How to assign (use) input name to Uppy uploader when we have multiple uppy uploader当我们有多个 uppy 上传者时，如何为 Uppy 上传者分配（使用）输入名称
【发布时间】：2020-06-30 12:51:22
【问题描述】：

我正在尝试使用Uppy 在我的Laravel 应用程序中上传一些图像。我需要在一页中有多个 uppy 元素，每个元素都上传一个特定的图像。例如，Uppy1 用于上传国籍卡图像，Uppy2 用于上传驾驶执照图像。我使用下面的代码上传图片。

<script>
        const Dashboard = Uppy.Dashboard;
        const XHRUpload = Uppy.XHRUpload;

        var cls = '.kt_uppy';
        var options = {
            proudlyDisplayPoweredByUppy: false,
            target: id,
            inline: true,
            resultName: 'uppyResult',
            replaceTargetContent: true,
            showProgressDetails: true,
            note: null,
            height: 170,
            metaFields: [
                { id: 'name', name: 'Name', placeholder: 'file name' },
                { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
            ],
            browserBackButtonClose: true,
        }

        var uppyDashboard = Uppy.Core({
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });

        uppyDashboard.use(Dashboard, options);
        uppyDashboard.use(XHRUpload, {
            endpoint: '{{ route('upload') }}',
        })

问题：

1 - 我们可以通过编写一个代码来使用和初始化多个 uppy 元素吗？（以上代码）因为我需要获取信息的人数是灵活的。例如：一个家庭有1个孩子，另一个家庭有3个孩子，上传的国籍卡数量是灵活的

2 - 如何为每个 uppy 元素分配不同的名称属性？喜欢：<input type="file" name"name1"> 和 <input type="file" name"name2">

【问题讨论】：

标签： laravel laravel-5 file-upload uppy

【解决方案1】：

你可以使用Uppy id options

你在 Uppy 实例中设置了 id 选项

然后，您可以单独控制每个 Uppy 实例

那么，设置id有两种方式

const uppy = Uppy({id: 'new id'})

const uppy = Uppy()

uppy.setOptions({id: 'new id'})

像下面的例子那样编辑你的代码

   var uppyDashboard = Uppy.Core({
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });
        
   
      var uppyOneDashboard = Uppy.Core({
            id: 'id 1',
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });
        
    var uppyTwoDashboard = Uppy.Core({
            id: 'id 2',
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });

那么，你有两个独立的 Uppy 实例

祝你好运

【讨论】：