Javascript 如何在react中加载图像并转换为blob

嗨，我和react有问题。我有一个方法，点击后开始导入图像。实际上，我的文件输入中有onChangeevent和此方法：

文件上传输入更改{ console.loge.target.value；//返回像C:\fakepath\pokemon-pikachu-wall-deal.jpg这样的图像的url }; 现在我必须把这个上传的文件转换成blob。请问我怎么做

我的其他代码如下所示：

export class GeneralySettings extends Component {
    /**
     * PropTypes fot component
     * @return {object}
     */
    static get propTypes() {
        return {
            userData: PropTypes.object.isRequired,
        };
    };

    constructor(props) {
        super(props);
        this.state = {
            showAvatarChangeButton: false,
            uploadedImage : '',
        };
        this.inputReference = React.createRef();

    }

    fileUploadAction(){
        this.inputReference.current.click();
    };

    fileUploadInputChange(e){
            console.log(e.target.value);
        };


    /**
     * Render method for user profile
     * @return {*}
     */
    render() {
        return (

                        <div className={'d-flex flex-column mr-2'}>
                            <div className={'position-relative'}
                                 onMouseEnter={() => this.setState({showAvatarChangeButton: true})}
                                 onMouseLeave={() => this.setState({showAvatarChangeButton: false})}>
                                <Avatar name="Foo Bar" className={'position-relative button-cursor'}/>
                                <div
                                    className={`position-absolute ${(this.state.showAvatarChangeButton ? 'd-inlene-block' : 'd-none')}`}
                                    id={'changeAvatarButton'}>
                                    <Button variant={'dark'} size={'sm'} block
                                            onClick={this.fileUploadAction.bind(this)}> Zmeniť</Button>
                                    <input type="file" hidden ref={this.inputReference}
                                           onChange={(e) => this.fileUploadInputChange(e)}/>
                                </div>
            </div>
        );
    }

}

使用文件阅读器

文件上传输入更改{ let reader=新文件读取器； reader.onload=函数e{ this.setState{uploadeImage:e.target.result}； }; reader.readAsDataURLevent.target.files[0]； } 要显示/预览图像，请执行以下操作：

//或者。。对于图像，请使用下面的

---

上载的文件仅为Blob。只需从文件数组中获取文件

选择文件方法-

    selectFile = () => {
    let uploadfile = document.getElementById('upload_doc');
    if (uploadfile) {
        this.setState({
            selectedUploadFile: uploadfile.files[0],
        });
    }
   };

上载文件并作为表单数据发送-

 const formData = new FormData();
   formData.append('file', this.state.selectedFile);
   this.uploadFile(formData); // here you can use fetch/Axios to send the form data

---

下面是一个示例，您如何使用

const{useState}=React； const fileToDataUri=file=>newpromiseresolve，reject=>{ const reader=新文件读取器； reader.onload=事件=>{ resolveevent.target.result }; reader.readAsDataURLfile； } 常量应用==>{ const[dataUri，setDataUri]=useState const onChange=file=>{ 如果！文件{ setDataUri； 回来 } fileToDataUrifile .thendataUri=>{ setDataUridataUri } } 回来 onChangeevent.target.files[0]| | null}/> } ReactDOM.render , document.getElementById'root' ;

---

如何在我的img src中显示此图像？？因为reader.readDataAsUrl不会返回任何内容

 const formData = new FormData();
   formData.append('file', this.state.selectedFile);
   this.uploadFile(formData); // here you can use fetch/Axios to send the form data

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var bb = new Blob([ab]);
    return bb;
}