React实现图片转base64编码

在开始之前，我们先来看看怎么上传一张图片，用的是原生的input标签

<input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="input" type="file" />

这样我们点击的时候就会弹出选择文件的窗口，但是我们业务的时候一般都不会只单单这样用，因为原生的input标签太丑了，那我们可以这样改造一下。这里主要还是用到了And Design。

<input onChange={this.change.bind(this)} accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style={{ opacity: 0 }} id="input" type="file" />
<Button style={{ marginBottom: 20 }} onClick={this.upload.bind(this)}>
       <Icon type="upload" />点击上传
</Button>

然后它就会变变得像下面这么好看了

我们的Button主要的是触发原生input的点击事件。Button点击事件代码如下

upload() {
    const input = document.getElementById('input')
    input.click()
}

然后我们再监听input的onChange事件，代码如下

    change() {
        var reader = new FileReader();
        var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
        //拿到上传的图片
        var file = document.getElementById('input').files[0];
        var files = file.name.split('.')
        var name = files[files.length - 1]
        var type = ['gif', 'png', 'jpg', 'svg', 'jpeg']
        //判断图片格式
        if (type.indexOf(name) === -1) {
            message.info(`不支持.${name}格式`)
            return
        }
        var imgUrlBase64;
        if (file) {
            //将文件以Data URL形式读入页面
            imgUrlBase64 = reader.readAsDataURL(file);
            reader.onload = function (e) {
                if (AllowImgFileSize !== 0 && AllowImgFileSize < reader.result.length) {
                    message.info('上传失败，请上传不大于2M的图片！');
                    return;
                } else {
                    const input = document.getElementById('value')
                    input.value = reader.result
                }
            }
        }
    }

然后再把生成的base64编码填入一个textarea里面，我们再来多一个复制按钮，点击就自动复制到粘贴板。复制功能的代码如下

copy(value) {
        var currentFocus = document.activeElement; // 保存当前活动节点
        let input = document.createElement('input'); // 创建一个input标签
        document.body.appendChild(input); // 把标签添加给body
        input.style.opacity = 0; //设置input标签设置为透明(不可见)
        input.value = value; // 把需要复制的值放到input上
        // 记录当前滚动位置, 因为添加节点并选中的时候回影响页面滚动
        let scrollY = window.scrollY;
        input.focus(); // input节点获取焦点
        input.setSelectionRange(0, input.value.length); // 选中input框中的所有文字
        var res = document.execCommand('copy', true); // 复制文字并获取结果
        currentFocus.focus(); // 之前活动节点获得焦点
        document.body.removeChild(input); // 删除添加的input节点
        // 页面滚动到之前位置
        window.scrollTo(0, scrollY);
    }