Filepond：上传带有缩略图的图像

Question

我的目标是上传一张最大尺寸的图片，以及一张 256 像素宽的缩略图。我有这个代码：

<script lang="ts">
    import type {FirebaseAuthentication} from "@docsndata/firebase-auth";
    import {FilePondProcessor} from "./FilePondProcessor";
    import {Team} from "@docsndata/model-team";
    import {FilePondOptions, ProgressServerConfigFunction} from "filepond";
    import * as FilePond from "filepond";
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
    import FilePondPluginImageResize from 'filepond-plugin-image-resize';
    import FilePondPluginImageTransform from 'filepond-plugin-image-transform';

    export let firebaseAuth: FirebaseAuthentication;

    function init(element: Element) {
        FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageTransform)

        const processor = new FilePondProcessor(new Team('docs-n-data', 'Docs N Data'), firebaseAuth)

        function process(fieldName: string, file: File|File[], metadata: { [key: string]: any }, load: (p: string | { [key: string]: any }) => void, error: (errorText: string) => void, progress: ProgressServerConfigFunction): any {
            console.log({fieldName, file, metadata})
            processor.process(fieldName, file, metadata, load, error, progress)
        }

        const options: FilePondOptions = {
            allowMultiple: true,
            imageResizeTargetWidth: 256,
            allowImageTransform: true,
            allowImageResize: true,
            imageTransformVariants: {
                thumb_medium_: transforms => {
                    transforms.resize.size.width = 256;
                    return transforms;
                }
            },
            server: {process}};

        const pond: FilePond = FilePond.create(element)
        pond.setOptions(options);
    }
</script>


<input type="file" use:init>

file 作为数组进入 process，因此 console.log 行结果为：

所以传过来的两张图片都是18475字节，而原图是4MB。所以这两个文件实例都是缩略图版本。

所以这是我的问题：

除了缩略图之外，我还需要做什么才能将最大尺寸的原始图像同时传递给 process？

PS 我完全知道这个 identical question，但是当 Filepond 的作者问“你注册了调整大小插件”时，那个问题的作者没有回复他。这个问题会引起我的注意一直到解决。

Answer 1

我认为您必须添加 imageTransformVariantsIncludeOriginal 属性，它告诉 FilePond 还将原始文件包含在输出列表中。

https://pqina.nl/filepond/docs/patterns/plugins/image-transform/#properties

Filepond：上传带有缩略图的图像

Filepond: upload an image with a thumbnail

javascript

filepond