在React裁剪器js中将base64转换为文件类型？

Question

我已经使用反馈裁剪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