0

我正在尝试使用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">

4

1 回答 1

0

你可以使用Uppy id 选项

您在 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 实例

祝你好运

于 2020-05-13T08:55:30.980 回答