要求是写一个头像裁剪工具并封装成一个组件，然后开始按功能一步步写代码：先上传图片=>预览图片=>编辑图片。一开始没想过兼容性问题，直接写了上传部分的代码。参考了很多代码和HTML5FILEAPI后，发现React写的这样的代码很少。因为想简单点，所以直接用letfile=e.target.files[0];leturl=window.URL.createObjectURL(file);console.info(url);打印出来的结果是：blob:http://localhost:3001/396d3dbb-be52-4fd4-aaf9-50c0c04ecef9这是一个DOMString类型的返回值，根据MDN：ADOMStringcontaininganobjectURLthatcanbeusedtoreferencethe指定源对象的内容。然后想用canvas加载这个文件，然后crop这个文件的操作，问题来了，ctx.drawImage(img)不能直接解析成这个DOMString再加载，后来在网上查到一定是转换成dataURL才可以正常加载，然后我一直在尝试这个解决方案：reader.readAsDataURL(file);会报错：UncaughtTypeError:Failedtoexecute'readAsDataURL'on'FileReader':parameter1isnotoftype'BlobcannotbesuccessfulconvertedbyFileReader.readAsDataURL(),最后看了stackoverflow上的一些解决方案，综合了一次。代码如下：从'react'导入React；从'react-dom'导入ReactDOM；classAppextendsReact.Component{constructor(props){super(props);this.handleChange=this.handleChange.bind(this);}handleChange(e){console.info(url);if(window.FileReader){console.info("支持文件阅读器");让文件=e.target.files[0];让阅读器=新文件阅读器（）；让img=newImage();if(file&&file.type.match('image.*')){reader.readAsDataURL(file);}else{console.info('不匹配！')}reader.onload=e=>{letctx=this.canvas.getContext('2d');img.src=reader.result;ctx.drawImage(img,10,10);}}}render(){return
