1

我使用 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"/>

在方法中，我在 FilePond 中捕获文件以将其传输到对象。在 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 Preview 中的裁剪图像 在此处输入图像描述

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

4

1 回答 1

1

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

于 2019-02-22T08:05:48.087 回答