Javascript 我正在使用react图像裁剪与react和Express来上传带有裁剪的个人资料图片

正在尝试使用上载裁剪的图像

然后就这样

我可以从src上传基本文件，但请注意裁剪的图像src。谁能告诉我如何获得裁剪的图像，制作文件并上传

这是我的ProfilePic组件-

          import React, { Component } from "react";
          import { connect } from "react-redux";
          import PropTypes from "prop-types";
          import ReactCrop from "react-image-crop";
          import "react-image-crop/dist/ReactCrop.css";
          import { setProfilePic } from "../../actions/authAction";

          // https://codesandbox.io/s/72py4jlll6
          class ProfilePic extends Component {
            constructor(props) {
              super(props);
              this.state = {
                src: null,
                crop: { x: 10, y: 10, aspect: 1, width: 50 },
                selectedFile: null,
                croppedImageUrl: null
              };

              this.onProfileImageSubmit = this.onProfileImageSubmit.bind(this);
            }
            b64toBlob(b64Data, contentType, sliceSize) {
              contentType = contentType || "";
              sliceSize = sliceSize || 512;

              var byteCharacters = atob(b64Data);
              var byteArrays = [];

              for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                  byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);

                byteArrays.push(byteArray);
              }

              var blob = new Blob(byteArrays, { type: contentType });
              return blob;
            }
            onProfileImageSubmit(e) {
              e.preventDefault();

              var ImageURL = this.state.src;
              var block = ImageURL.split(";");
              var contentType = block[0].split(":")[1];
              var realData = block[1].split(",")[1];
              var blob = this.b64toBlob(realData, contentType);

              console.log(blob);

              const data = new FormData();

              data.append("profilePic", blob);
              this.props.setProfilePic(data);
            }
            onSelectFile = e => {
              this.setState({ selectedFile: e.target.files });
              if (e.target.files && e.target.files.length > 0) {
                const reader = new FileReader();
                reader.addEventListener("load", () =>
                  this.setState({ src: reader.result })
                );
                reader.readAsDataURL(e.target.files[0]);
              }
            };

            onImageLoaded = (image, pixelCrop) => {
              this.imageRef = image;

              // Make the library regenerate aspect crops if loading new images.
              const { crop } = this.state;

              if (crop.aspect && crop.height && crop.width) {
                this.setState({
                  crop: { ...crop, height: null }
                });
              } else {
                this.makeClientCrop(crop, pixelCrop);
              }
            };

            onCropComplete = (crop, pixelCrop) => {
              this.makeClientCrop(crop, pixelCrop);
            };

            onCropChange = crop => {
              this.setState({ crop });
            };

            async makeClientCrop(crop, pixelCrop) {
              if (this.imageRef && crop.width && crop.height) {
                const croppedImageUrl = await this.getCroppedImg(
                  this.imageRef,
                  pixelCrop,
                  "newFile.jpeg"
                );

                this.setState({ croppedImageUrl });
              }
            }

            getCroppedImg(image, pixelCrop, fileName) {
              const canvas = document.createElement("canvas");
              canvas.width = pixelCrop.width;
              canvas.height = pixelCrop.height;
              const ctx = canvas.getContext("2d");

              ctx.drawImage(
                image,
                pixelCrop.x,
                pixelCrop.y,
                pixelCrop.width,
                pixelCrop.height,
                0,
                0,
                pixelCrop.width,
                pixelCrop.height
              );

              return new Promise((resolve, reject) => {
                canvas.toBlob(blob => {
                  blob.name = fileName;
                  window.URL.revokeObjectURL(this.fileUrl);
                  this.fileUrl = window.URL.createObjectURL(blob);
                  resolve(this.fileUrl);
                }, "image/jpeg");
              });
            }
            render() {
              const { croppedImageUrl } = this.state;
              return (
                <div>
                  <div
                    className="modal fade"
                    id="update-header-photo"
                    tabindex="-1"
                    role="dialog"
                    aria-labelledby="update-header-photo"
                    aria-hidden="false"
                  >
                    <div
                      className="modal-dialog window-popup update-header-photo"
                      role="document"
                    >
                      <div className="modal-content">
                        <a
                          href="#"
                          className="close icon-close"
                          data-dismiss="modal"
                          aria-label="Close"
                        >
                          <i class="fa fa-user mr-3" aria-hidden="true" />
                        </a>
                        <div className="modal-header">
                          <h6 className="title">Update Header Photo</h6>
                        </div>
                        <div className="modal-body">
                          <a
                            href="#"
                            className="upload-photo-item"
                            style={{ width: "100%" }}
                          >
                            <form onSubmit={this.onProfileImageSubmit}>
                              <div>
                                <input
                                  type="file"
                                  onChange={this.onSelectFile}
                                  name="profilePic"
                                />
                              </div>
                              {this.state.src && (
                                <ReactCrop
                                  src={this.state.src}
                                  crop={this.state.crop}
                                  onImageLoaded={this.onImageLoaded}
                                  onComplete={this.onCropComplete}
                                  onChange={this.onCropChange}
                                />
                              )}
                              {croppedImageUrl && (
                                <img alt="Crop" src={croppedImageUrl} />
                              )}

                              <h6>Upload Photo</h6>
                              <span>Browse your computer.</span>
                              <input
                                className="btn btn-primary btn-lg full-width"
                                type="submit"
                                value="save"
                              />
                            </form>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            }
          }
          export default connect(
            null,
            { setProfilePic }
          )(ProfilePic);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“道具类型”导入道具类型；
从“反应图像裁剪”导入反应裁剪；
导入“react image crop/dist/ReactCrop.css”；
从“../../actions/authAction”导入{setProfilePic}”；
// https://codesandbox.io/s/72py4jlll6
类ProfilePic扩展组件{
建造师（道具）{
超级（道具）；
此.state={
src:null，
裁剪：{x:10，y:10，纵横比：1，宽度：50}，
selectedFile:null，
croppedImageUrl:null
};
this.onProfileImageSubmit=this.onProfileImageSubmit.bind（this）；
}
b64toBlob（b64Data、contentType、sliceSize）{
contentType=contentType | |“”；
切片大小=切片大小| | 512；
var byteCharacters=atob（b64Data）；
var ByteArray=[]；
对于（变量偏移量=0；偏移量{
this.setState（{selectedFile:e.target.files}）；
如果（e.target.files&&e.target.files.length>0）{
const reader=new FileReader（）；
reader.addEventListener（“加载”，（）=>
this.setState（{src:reader.result}）
);
reader.readAsDataURL（e.target.files[0]）；
}
};
onImageLoaded=（图像，像素裁剪）=>{
this.imageRef=图像；
//如果加载新图像，请使库重新生成方面裁剪。
const{crop}=this.state；
if（裁剪.aspect&&crop.height&&crop.width）{
这是我的国家({
裁剪：{…裁剪，高度：null}
});
}否则{
这个.makeClientCrop（crop，pixelCrop）；
}
};
onCropComplete=（裁剪，像素裁剪）=>{
这个.makeClientCrop（crop，pixelCrop）；
};
onCropChange=crop=>{
这个.setState（{crop}）；
};
异步makeClientCrop（裁剪、像素裁剪）{
if（this.imageRef&&crop.width&&crop.height）{
const cropedimageurl=等待此消息。getcropedimg(
这是imageRef，
像素作物，
“newFile.jpeg”
);
this.setState（{cropedimageurl}）；
}
}
getCroppedImg（图像、像素裁剪、文件名）{
const canvas=document.createElement（“canvas”）；
canvas.width=像素裁剪.width；
canvas.height=像素裁剪.height；
const ctx=canvas.getContext（“2d”）；
ctx.drawImage(
形象,，
pixelCrop.x，
像素，
像素宽度，
像素高度，
0,
0,
像素宽度，
像素高度
);
返回新承诺（（解决、拒绝）=>{
canvas.toBlob（blob=>{
blob.name=文件名；
window.URL.revokeObjectURL（this.fileUrl）；
this.fileUrl=window.URL.createObjectURL（blob）；
解析（this.fileUrl）；
}，“图像/jpeg”）；
});
}
render（）{
const{croppedImageUrl}=this.state；
返回(
更新标题照片
);
}
}
导出默认连接(
无效的
{setProfilePic}
)（PIC）；

在getcropedimg（）函数中添加

this.setState（{blob:blob}）

并在ProfileImageSubmit（）上修改

：

我们不需要将base64转换为Blob。
第一行
您可以添加
，请告诉OP在哪里添加它？您可以添加新行：this.setState（{Blob:Blob}）在getCroppedImg（）函数
中，我们不需要将base64转换为Blob。
，一个不需要它的解释将帮助OP和其他读者清除它们的错误
canvas.toBlob(blob => {
    blob.name = fileName;
    window.URL.revokeObjectURL(this.fileUrl);
    this.fileUrl = window.URL.createObjectURL(blob);
    resolve(this.fileUrl);
    this.setState({blob:blob}) //added by SO huy nguyen 
}, "image/jpeg");

onProfileImageSubmit(e) {
  e.preventDefault();           
  const data = new FormData();
  data.append("profilePic", this.state.blob);
  this.props.setProfilePic(data);
}