Javascript 长得离谱

我正在尝试使用

react-crapper

保存裁剪的图像。它似乎按预期工作，但保存的URL非常长。数据包的控制台日志通常超过100kb，这只是一个数据URL

当我控制台记录日志（并发送到数据库）时，我存储一个以

data:image/png开头的值；base64，iVBORw0…

然后继续，在IDE中滚动到它的末尾大约需要20秒

我注意到这也是一个问题

我直接从那个演示中获取了代码，但为了方便起见，我也会将其粘贴到这里

export const CropperWidget = ({ userPhoto }) => {
  const [image, setImage] = useState(userPhoto);
  const [cropData, setCropData] = useState("");
  const [cropper, setCropper] = useState();

  const onChange = (e) => {
    e.preventDefault();
    let files = e.target.files;
    const reader = new FileReader();
    reader.onload = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(files[0]);
  };

  const getCropData = () => {
    if (typeof cropper !== "undefined") {
      setCropData(cropper.getCroppedCanvas().toDataURL());
    }
  };

  useEffect(() => {
    if (cropData) {
      postImage(cropData);
    }
  });

  return (
    <div>
      <br />
      <div>
        <input type="file" onChange={onChange} />
        <br />
        <br />
        <Cropper
          style={{ height: 400, width: 400 }}
          initialAspectRatio={1}
          preview=".img-preview"
          src={image}
          viewMode={1}
          guides={true}
          minCropBoxHeight={10}
          minCropBoxWidth={10}
          background={false}
          responsive={true}
          autoCropArea={1}
          checkOrientation={false} // https://github.com/fengyuanchen/cropperjs/issues/671
          onInitialized={(instance) => {
            setCropper(instance);
          }}
        />
      </div>
      <button onClick={getCropData}>Crop Image</button>
      <br />
    </div>
  );
};

export const crapperwidget=（{userPhoto}）=>{
const[image，setImage]=useState（userPhoto）；
常量[cropData，setCropData]=useState（“”）；
const[croper，setcroper]=useState（）；
const onChange=（e）=>{
e、 预防默认值（）；
让files=e.target.files；
const reader=new FileReader（）；
reader.onload=（）=>{
setImage（reader.result）；
};
reader.readAsDataURL（文件[0]）；
};
常量getCropData=（）=>{
if（裁剪器类型！=“未定义”）{
setCropData（crapper.getcropedcanvas（）.toDataURL（））；
}
};
useffect（（）=>{
如果（cropData）{
后期图像（cropData）；
}
});
返回(






{
setCropper（实例）；
}}
/>
作物图像


);
};

将数据发送到服务器，将其转换为二进制文件，将其存储在某个位置（例如，您服务器的硬盘或Amazon S3），为其提供一个HTTP URL，然后在将来使用该HTTP URL。

很好。对图像包含大量数据。在Base64中表达它需要很多字符。你有没有真正的问题？是的，问题是：有没有一种方法可以更容易地存储它？我所说的“可管理的”更具体地说是指一个更短或更具可读性的URL。