在 React cropper js 中将 base64 转换为文件类型？

Question

我使用 react cropper js 创建了裁剪功能。我需要将图像作为文件类型发送。我能够为裁剪图像获取 base64 字符串。当我提交需要将裁剪图像作为文件类型发送时。在这里，我包含了裁剪功能的代码。如何将裁剪区域图像作为文件发送？

这是我的代码，

var React  = require('react');
var Cropper = require('react-cropper').default;

var MyProfileEdit = React.createClass({
    getInitialState:function(){
        return {
            open:false,
            src:"",
            cropResult: null
        }
    },
    onChange:function(e){
        var self = this;
        $("#photo").val('');
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    self.setState({
                        open:true,
                        src: reader.result
                    });
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#photo").one('change', function (e) {
            e.preventDefault();
            var self = this;
            readURL(self);
        });
    },
    cropImage:function(){
        if (typeof this.refs.cropper.getCroppedCanvas() === 'undefined') {
            return;
        }
        this.setState({
            open:false,
            cropResult: this.refs.cropper.getCroppedCanvas().toDataURL()
        });
    },
    cancelCrop: function() {
        this.setState({
            open:false,
            src:"",
            cropResult:null
        });
    },
    crop:function(){
        if (typeof this.refs.cropper.getCroppedCanvas() === 'undefined') {
          return;
        }
        this.setState({
          cropResult: this.refs.cropper.getCroppedCanvas().toDataURL()
        });
    },
    render:function(){
        return (
            <div className="view-container">
                <div className="scroll-content has-header">
                    <form className="edit-profile">
                        <div className="container">
                            <div className="profile-photo">
                                <div className="profile-photo-upload">
                                    <div className="img-preview" style={{ width: '100%', height: 120 }}>
                                        <img src="img/photo.png" width="120" alt="Photo" />
                                    </div>
                                    <span className="upload-icon">
                                        <input type="file" id="photo" onClick={this.onChange} />
                                        <input type="text" name="ptyPhoto" />
                                    </span>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
                <div className={"profile-popup "+(this.state.open ? "active" : "inactive")}>
                    <div className="crop-area">
                        <Cropper
                            style={{ height: 280, width: '100%' }}
                            preview=".img-preview"
                            aspectRatio={1 / 1}
                            guides={false}
                            src={this.state.src}
                            ref="cropper"
                            crop={this.crop} />

                        <div className="row-col">
                            <div className="col"><button className="button button-red" onClick={this.cropImage}>Crop</button></div>
                            <div className="col"><button className="button button-red" onClick={this.cancelCrop}>Cancel</button></div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

module.exports = MyProfileEdit;

Answer 1

您可以从 base64 创建 Blob 并使用 XMLHttpRequest 上传。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blob);

请参阅此处了解 base64 到 blob 的转换：Creating a Blob from a base64 string in JavaScript