0

我正在使用 FilePond 和 Doka 来管理和编辑具有独特需求的表单上的图像上传，我希望能够在将文件添加到 FilePond 时自动调整图像大小和/或压缩图像。

我正在使用 FilePond + Doka 的 React 实现。

图像大小调整和压缩已配置，并且在用户编辑图像然后点击“完成”时工作，因此很明显事情连接正确。

在我们的用例中，我们不太关心生成图像的质量和分辨率，但我们使用 IndexedDB 和 LocalStorage 对客户端大小进行了大量自定义文件管理。大多数用户图像不会由用户手动编辑/标记，因此我们希望能够在打开事务并推送到 IndexedDB 之前手动调整大小和压缩。

我尝试使用 filePond.current.processFiles() 并发现一切都运行了，但文件大小似乎没有改变，并且这个处理函数也启动了文件上传。

// Imports
import { FilePond, registerPlugin } from "react-filepond"
import FilePondPluginImageEdit from "filepond-plugin-image-edit"
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"
import FilePondPluginImagePreview from "filepond-plugin-image-preview"
import FilePondPluginFileEncode from "filepond-plugin-file-encode"
import FilePondPluginImageTransform from "filepond-plugin-image-transform"
import FilePondPluginImageResize from "filepond-plugin-image-resize"
import * as Doka from "../../scripts/react-doka/lib/doka.esm.min"

// Register FilePond plugins
registerPlugin(
  FilePondPluginImageEdit,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginFileEncode,
  FilePondPluginImageTransform,
  FilePondPluginImageResize
)

// Component

          <FilePond
            ref={filePond}
            files={photoFiles}
            allowImageEdit={true}
            allowMultiple={true}
            maxFiles={10}
            allowImageExifOrientation={true}
            allowImageResize={true}
            imageResizeTargetWidth={800}
            imageResizeTargetHeight={800}
            imageResizeMode={"contain"}
            instantUpload={false}
            disabled={isDisabled}
            allowDrop={!isDisabled}
            allowBrowse={!isDisabled}
            labelIdle={cameraButton}
            server="api/"
            onupdatefiles={fileItems => {
              updateFiles(fileItems.map(fileItem => fileItem.file))
            }}
            imageEditEditor={
              (DokaInstance = Doka.create({
                utils: ["crop", "markup"],
                markupAllowAddMarkup: true,
                markupColorDefault: 3,
                outputData: true, //Output the modifications made as an object representing the changes
                outputStripImageHead: false, // exif data
                outputQuality: 75,
                outputWidth: 800,
                outputHeight: 800,
                outputFit: "contain",
                onconfirm: output => {
                  handleDokaConfirm(output)
                },
              }))
            }
          />```
4

1 回答 1

1

您必须使用onpreparefile回调来访问输出文件。

https://codesandbox.io/s/vanilla-filepond-prepare-file-bm2vr

另一种选择是使用该server.process方法（接收转换后的图像）将图像存储在本地某处。

于 2019-11-07T08:00:45.223 回答