在 React 上加载 img 的百分比

Question

我在 React Web 应用程序上显示图像。

我的代码如下所示：

<img
    alt={fileName}
    onLoad={onLoad}
    src={url}
/>

我想在图像周围显示一个指示器，告诉用户图像下载百分比。

我知道onLoad属性是提供一个函数，该函数将在图像完成加载时调用，但我不知道如何检测图像下载百分比(或下载大小(。

有没有像onLoad这样的房产？我试过onProgress但它没有被解雇。

我已经阅读了这个问题 JavaScript 加载图像的进度。

但是这个问题中得票最高的答案并没有回答我的问题。

这个答案需要手动创建一个新的 Image(( 实例，我想知道是否有对onProgress属性的内置支持，或者请建议如何构建一个较低的机制来支持这一点。

Answer 1

我尝试在 img 标签 jsx 中使用内置属性的 onProgress 但不起作用，不确定为什么它是音频或视频专用的

所以我创建了自己的方法来获取图像的百分比，方法是在XMLHttpRequest中手动获取图像arrrayBuffer，这里看起来像

...
componentDidMount(): void {
  const {src, onProgress, onLoadStart, onLoadEnd} = this.props;
  if (onProgress || onLoadStar || onLoadEnd) {
    this.renderImage(src);
    return;
  }
  this.setState({src});
}
renderImage = (src: string) => {
  const {onProgress, onLoadStart, onLoadEnd} = this.props;
  const request = new XMLHttpRequest();
  request.responseType = 'arraybuffer';
  request.open('GET', src, true);
  request.onprogress = function (e) {
    const loadPercentage = Math.floor((e.loaded / e.total) * 100);
    onProgress && onProgress(loadPercentage);
  };
  request.onloadstart = () => {
    onLoadStart && onLoadStart();
  };
  request.onloadend = () => {
    const blob = new Blob([request.response]);
    const source = window.URL.createObjectURL(blob);
    this.setState({src: source});
    onLoadEnd && onLoadEnd();
  };
  request.send();
};
render(): ReactNode {
  return <img src={this.state.src}/>
}
...