Vue FilePond中的文件大小调整不起作用

Question

我使用Vue FilePond管理我的图像。 我想在上传后调整大小/裁剪图像。遵循此处的文档：FilePond

这是我的代码：

 <FilePond
    name="test"
    ref="pond"
    :maxFiles="max || 1"
    labelIdle="Drop files here..."
    allowMultiple="false"
    acceptedFileTypes="image/jpeg, image/png"

    v-bind:files="myFiles"
    v-on:addfile="add"
    imagePreviewHeight = "200"
    allowImagePreview ="true"
    allowImageCrop="true"
    imageCropAspectRatio="1:1"
    allowImageResize="true"
    imageResizeTargetWidth="200"
    imageResizeTargetHeight="200"
    imageResizeMode="contain"
    imageResizeUpscale="false"
    v-on:init="handleFilePondInit"/>

在Method中，我在FilePond中捕获了文件以将其传输到Object。在FilePond中，图像可以正确裁剪，但是传输的文件不正确。好像是我在捕获源文件。

在方法中：

 add: function(fieldName, file) {
     let $this= this
     console.log('#', file.file)
     var ref = this
     const reader = new FileReader();
     reader.readAsDataURL(file.file); 
     reader.onloadend = function() {
     ref.addproject.image= reader.result;
     console.log('yy',reader.result);
     }
     },

这是Filepond预览中的裁剪图像

我的问题：结果是我得到了原始文件，而不是预览中的裁剪/调整大小的图像。

Answer 1

您是否有可能忘记注册image transform plugin？没有它，FilePond不会进行客户端图像转换。