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

Question

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

<a>href="https://www.whateverpage.com/">Visit Whateverpage</a>

<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行的结果为：

因此，传递的两个图像均为18475字节，而原始图像为4MB。因此，这两个File实例都是缩略图版本。

这是我的问题：

除了缩略图之外，我该怎么做才能将原始最大尺寸图像都传递到console.log？

PS完全了解此identical question，但是该问题的作者在询问“您是否已注册大小调整插件”时没有回复Filepond的作者。这个问题将一直引起我的关注。

Answer 1

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

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