我正在使用react-dropzone包(https://github.com/okonet/react-dropzone)从用户那里获取图像。用户上传其图像,一切正常,但我只能得到类似于“blob:http//blahblah”的内容,而我需要将图像转换为base64 png格式。
我的dropzone组件:
我会得到一个错误:
我的dropzone组件:
<Dropzone ref="dropzone" multiple={false} onDrop={this.onDrop.bind(this)} >
{this.state.files ?<img className="img-responsive" src={this.state.files[0].preview}></img>
: <div>Upload Photo</div> }
</Dropzone>
还有获取 Blob URL 的放置功能:
onDrop (files ) {
if ( files.length === 0 ) {
alert("upload img please")
return;
}
console.log('Received files: ', files);
this.setState({files:files})
var blobURL = files[0].preview
var reader = new FileReader();
reader.readAsDataURL(blobURL)
}
我会得到一个错误:
未捕获的 TypeError:在“FileReader”上执行“readAsDataURL”失败:参数1不是“Blob”类型。
我认为这是因为我尝试传递指向 Blob 的对象 URL,但是我应该从哪里获取 Blob 才能将其转换为 base64?
<img>
的src
设置为Blob URL,而无需获取数据URL。 - loganfsmyth