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

【问题标题】：How prefill/preload images in uppy.io library如何在 uppy.io 库中预填充/预加载图像
【发布时间】：2020-01-20 19:02:34
【问题描述】：

我有一个文章发布服务，它有一个带有 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>

该表单非常适合发布文章，我只想编辑它们，甚至是链接的图像。

【问题讨论】：

你找到方法了吗？
没有人，还没有，必须使用上面的自定义 div 和 jquery 来删除资源。

标签： laravel uppy

【解决方案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

【讨论】：