Question

我正在使用Angular Croppie，但在通过http发送用户提供的裁剪图像时遇到问题。用户上传图片：

<input data-upload-directive type="file" name="file" accept="image/*" />

用户可以通过croppie指令进行哪些编辑：

<croppie ng-if="cropped.source" src="cropped.source"
         ng-model="cropped.image"
         options="{boundary:{width:300,height:350}}">
</croppie>

然后我通过一个自定义指令访问文件数据：

function uploadDiretive(uploadAvatarServ) {

return {
    restrict: 'A',
    scope: true,
    link: function (scope, element, attr) {
        element.bind('change', function (event) {

            var reader = new FileReader();
            reader.onload = function (e) {
               scope.$apply(function () {
                   scope.cropped.source = e.target.result; //THIS IS THE CROPPED IMAGE
               });
               var formData = new FormData();
               formData.append('file', element[0].files[0]);

               uploadAvatarServ('../p3sweb/FileUploadServlet', formData, function (callback) {
                   console.log(callback)
                });

            }
            reader.readAsDataURL(input.files[0]);
        });
    }
};

发送element[0].files[0]可以，但是发送不需要的原始图像。我想要通过croppie指令在前端创建的裁剪图像。

<croppie ng-if="cropped.source" src="cropped.source"
         ng-model="cropped.image"
         options="{boundary:{width:300,height:350}}">
</croppie>

您可以在reader.onload中看到以事件参数为目标的裁剪图像。

问题

如何在http请求中发送裁剪的图像（scope.cropped.source = e.target.result）？注意：当我登录e.target.result时，它显示了Base64 URL

在AngularJS中通过http发送裁剪的图像时出现问题

0 个答案: