注入裁剪文件作为输入：文件值

Question

我正在使用 jQuery Croppie 库来裁剪用户上传的文件。当用户上传文件时，我正在打开用户可以裁剪图像的模式。之后，我想将此裁剪后的图像设置为文件输入值，以便用户可以在一切准备就绪后提交表单，但我不知道如何将裁剪后的图像“设置”为输入值。

这是我的代码。

$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 编码的图像内容并将其放入新文件。

警告代码未测试。