【场景实现】React+material-ui+typescript实现H5上传身份证后显示图片 ，FileReader.readAsDataURL()方法读取图像信息

原理

readAsDataURL方法用于读取指定的内容File。读取操作完成后，readyState变成DONE，并loadend触发。那时，该result属性包含数据作为数据：URL表示文件数据为base64编码的字符串。

举个栗子

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Javascript

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

本文场景：上传身份证

HTML

 <FormItem label="身份证国徽面">
            <>
            <div className={classes.upload}>
                <input className={classes.input} type="file" accept="image/*" onChange={onChoose}/>
                        <ButtonBase
                            focusRipple
                            className={classes.uploadBtn}
                            component="span"
                        >
                        <img src={img3} className={classes.img2} alt=""></img>
                        </ButtonBase>
            </div>
            {selectedImg?
            <div className={classes.cropperContainer}>
                <img
                    className={classes.cropperImg}
                    src={selectedImg}
                    alt=""
                />
            </div>
            :''}
   </>

CSS

 upload:{
        width: '100%',
        height: '100%',
        position:'relative',
        border: '1px dashed rgba(232,232,232,1)',
        overflow: 'hidden'
    },
    input: {
        width: theme.typography.pxToRem(342),
        height: theme.typography.pxToRem(181),
        position:'absolute',
        display: 'none'
    },
    uploadBtn: {
        display: 'flex',
        width: '100%',
        height: '100%',
        alignItems: 'center',
        textAlign: 'center'
    },
    cropperContainer: {
        position:'absolute',
        width: theme.typography.pxToRem(342),
        height: theme.typography.pxToRem(181),
    },
    cropperImg: {
        width: theme.typography.pxToRem(342),
        height: theme.typography.pxToRem(181),
    },

Javascript

const [currency, setCurrency] = React.useState('EUR');
const [selectedImg, setSelectedImg] = useState<undefined | string>();

const onChoose = (e: any) => {
    e.persist();
    e.preventDefault();
    let files;
    if (e.dataTransfer) {
        files = e.dataTransfer.files;
    } else if (e.target) {
      files = e.target.files;
    }
    const reader = new FileReader();
    reader.onload = () => {
            setSelectedImg(reader.result as string);
            // setModalVisible(true);
            e.target.value = '';
    };
    reader.readAsDataURL(files[0]);
    setCurrency('EUR')
  };