Question

我正在尝试使用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元素分配不同的name属性？像：<input type="file" name"name1">和<input type="file" name"name2">

Answer 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实例

祝你好运

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

1 个答案: