图片处理，使用FileReader对象将 Blob 或 File 对象转成url

**开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

需求

点击上传图片后不将图片上传至服务器，本地实现预览，点击保存在将所有图片保存至服务器。

了解FileReader.readAsDataURL()

readAsDataURL 方法会读取指定的 Blob或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 onload 事件，同时 result 属性将包含一个data: URL 格式的字符串（base64 编码）以表示所读取文件的内容。

代码范例

1. 使用 Antd的上传组件 Upload获取到 File文件对象。

<Upload
  accept="image/*"
  showUploadList={false}
  beforeUpload={this.handleUpload}
>
  <Button>
    <Icon type="upload" /> 上传图片
  </Button>
</Upload>

2. 使用readAsDataURL 方法将File文件对象转换成 Url,并保存。

  handleUpload = file => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      this.setState(
        {
          imageUrl: reader.result,
        }
      );
    };
  };

3. 将 <img>标签的src替换。

 <img
      alt="图片处理"
      src={this.state.imageUrl}
    ></img>

FileReader常用的方法

• FileReader.abort() 中止读取操作。在返回时，readyState属性为DONE。

• FileReader.readAsArrayBuffer() 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

• FileReader.readAsBinaryString() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

• FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。

• FileReader.readAsText() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

FileReader事件处理

• FileReader.onabort

• 处理abort事件。该事件在读取操作被中断时触发。

• FileReader.onerror

• 处理error事件。该事件在读取操作发生错误时触发。

• FileReader.onload

• 处理load事件。该事件在读取操作完成时触发。

• FileReader.onloadstart

• 处理loadstart事件。该事件在读取操作开始时触发。

• FileReader.onloadend

• 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

• FileReader.onprogress

• 处理progress事件。该事件在读取Blob时触发。

总结

一般做图片上传时候都应该有个预览，用户二次确认时候才是真正上传，避免用户重复上传消耗资源。