如何解决Filepond:上传带有缩略图的图像
我的目标是上传最大尺寸的图片,以及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,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的作者。这个问题将一直引起我的关注。
解决方法
我认为您必须添加imageTransformVariantsIncludeOriginal
属性,该属性告诉FilePond也将原始文件包括在输出列表中。
https://pqina.nl/filepond/docs/patterns/plugins/image-transform/#properties
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。