注入裁剪的文件作为输入:文件值

Question

我正在使用jQuery croppie lib裁剪用户上传的文件。当用户上传文件时，我正在打开模式，用户可以在其中裁剪图像。之后，我想将此裁剪的映像设置为文件输入值，以便用户可以在准备就绪时提交表单，但是我不知道如何将裁剪图像"设置"为输入值。

这是我的代码。

$scope.openCropModal = function(files) {
            if (!(files[0] instanceof Object) || (fileUploadMaxSize * 1100000) < files[0].size) {
                Alertify.alert('File size must be less than ' + fileUploadMaxSize + 'mb');
                return false;
            }
            $('#cropLogoModal').modal({});
            var $uploadCrop = $('#cropperMainContainer').croppie({
                viewport: {
                    width: 200,
                    height: 200,
                    type: 'square'
                },
                boundary: {
                    width: 300,
                    height: 300
                },
                enableExif: true,
                enableOrientation: true,
                orientation: 4,
            });
            var reader = new FileReader();
            reader.onload = function (e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                }).then(function() {
                });
            };
            reader.readAsDataURL(files[0]);
            $('#ready').on('click', function() {
                $uploadCrop.croppie('result', 'blob').then(function(blob) {
                });
            });
            $('.vanilla-rotate').on('click', function() {
                $uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
            });
        }

Answer 1

，而不是将其放为文件附件，而是为BAS64编码的BLOB数据创建隐藏字段。

        var reader = new FileReader();
        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            }).then(function(blob) {
                $('#hiddenContent').val(btoa(blob));
            });
        };

和在服务器端时，请阅读此base64编码图像内容并将其放入新文件。

警告未测试的代码。