如何在uppy.io库中预填充/预加载图像

Question

我有一个文章张贴服务，其中有一个与uppy.io上传表单

一切都很好，但我需要编辑这些文章和他们的链接图像。

如何预填充已上载到uppy.io DashBoard的图像？

我的实际代码：

<div class="DashboardContainer"></div>

<!-- AJAX Uploading for Add Post -->
<script src="https://transloadit.edgly.net/releases/uppy/v1.8.0/uppy.min.js"></script>
<script src="https://transloadit.edgly.net/releases/uppy/locales/v1.11.0/es_ES.min.js"></script>
<script>
    const uppy = Uppy.Core({
            debug: true,
            autoProceed: true,
            restrictions: {
                maxFileSize: 600000,
                maxNumberOfFiles: 10,
                minNumberOfFiles: 1,
                allowedFileTypes: ['.jpg', '.jpeg', '.png', '.gif']
            },
            locale: Uppy.locales.es_ES
        })
        .use(Uppy.Dashboard, {
            inline: true,
            target: '.DashboardContainer',
            replaceTargetContent: true,
            showProgressDetails: true,
            note: 'Sólo imágenes, hasta 10 fotos, de no más de 800kb',
            height: 350,
            width: '100%',
            metaFields: [{
                    id: 'name',
                    name: 'Name',
                    placeholder: 'Nombre del fichero subido'
                },
                {
                    id: 'caption',
                    name: 'Caption',
                    placeholder: 'Describe la imagen que estás subiendo'
                }
            ],
            browserBackButtonClose: true,
            plugins: ['Webcam']
        })
        .use(Uppy.XHRUpload, {
            endpoint: "{{ route('save-image-ajax') }}",
            formData: true,
            fieldName: 'files[]',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
            },
        })
    uppy.on('upload-success', (file, response) => {
        response.status // HTTP status code
        response.body // extracted response data
        // do something with file and response
        $('<input>', {
            type: 'hidden',
            name: 'imageID[]',
            value: response.body.imageID
        }).appendTo("#add");
    })
    uppy.on('complete', result => {
        console.log('successful files:', result.successful)
        console.log('failed files:', result.failed)
    })
</script>

这个表单很适合发表一篇文章，我只想编辑它们，甚至是链接的图像。

Answer 1

您可以从url预填充图像(首先将远程图像转换为blob)：

fetch({{your_image_url}})
.then((response) => response.blob())
.then((blob) => {
  uppy.addFile({
    name: "image.jpg",
    type: blob.type,
    data: blob
  });
});

然后，将已加载镜像的状态设置为已完成，以避免Uppy重新上传：

uppy.getFiles().forEach(file => {
  uppy.setFileState(file.id, { 
    progress: { uploadComplete: true, uploadStarted: false } 
  })
})

此外，在Uppy对象配置中，属性"autoProceed“必须为false。

来源：https://github.com/transloadit/uppy/issues/1112#issuecomment-432339569