blob:http://192.168.1.136:10086/6f0d8da转成真正的blob再转成base64

最新推荐文章于 2024-09-19 16:49:51 发布

原创最新推荐文章于 2024-09-19 16:49:51 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

js+jq 同时被 2 个专栏收录

10 篇文章

订阅专栏

taro

8 篇文章

订阅专栏

本文介绍如何使用AtImagePicker组件处理图片，包括通过fetch获取真实blob数据，利用FileReader读取并转换为base64格式，实现图片的预览和上传功能。

AtImagePicker的onChange拿到的url是这样的blob:http://192.168.1.136:10086/6f0d8da，但这并不是真正的blob，通过fetch可以拿到真正的blob，再用FileReader的readAsDataURL可以得到base64，或FileReader的其他方法拿到其他数据格式

  onChange(files) {
    let that = this;
    for (let i = 0; i < files.length; i++) {
      fetch(files[i].url).then(data => {
        const blob = data.blob();
        return blob;
      }).then(blob => {
        let reader = new window.FileReader();
        reader.onloadend = function () {
          const data = reader.result;
          // console.log(data);
          files[i].url = data;
          that.setState({
            files
          })
        };
        reader.readAsDataURL(blob);
      })
    }
  }

     <AtImagePicker
          multiple
          files={this.state.files}
          onChange={this.onChange.bind(this)}
          onFail={this.onFail.bind(this)}
          onImageClick={this.onImageClick.bind(this)}
        />