input 图片上传，转成 base64，点击复制

主要是为了实现图片转 base64 功能。

1、通过图片上传，使用 FileReader 读取文件，直接可获得 base64 字符串

2、通过 document.execCommand('copy'); 实现复制功能

 

/**
 * 图片转为 base64 字符串存储；（上传图片+复制base64字符串）
 */
export class ToBase64 {
    
    constructor() {
        // 添加 input
        this.addTarget();
    }

    /**
     * 添加必要元素
     */
    addTarget() {
        let ele = `
            <div class="warp">
                <div class="warp-content">点击上传</div>
                <input type="file" id="file"/>
            </div>
            <img src="" alt="" class="img" />
        `;
        let body = $('body');
        body.append(ele);
        let _self = this; // 保存当前对象引用
        let file = document.getElementById('file');
        let image = document.getElementsByClassName('img')[0];
        file.onchange = function () {
            // 获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
            let fileData = this.files[0];
            let pettern = /^image/;

            console.info(fileData.type)

            if (!pettern.test(fileData.type)) {
                alert("图片格式不正确");
                return;
            }
            let reader = new FileReader();
            // 异步读取文件内容，结果用data:url的字符串形式表示
            reader.readAsDataURL(fileData);
            /*当读取操作成功完成时调用*/
            reader.onload = function (e) {
                console.log(e); //查看对象
                // 要的数据 这里的this指向FileReader（）对象的实例reader
                console.log(this.result);
                image.setAttribute("src", this.result);

                // 将字符串打印在界面上
                let input = document.createElement('textarea');
                input.value = this.result;
                input.rows = 10;
                input.style.display = 'block';
                input.style.width = '80%';
                body.append(input);

                // 添加复制按钮
                let button = document.createElement('button');
                button.innerHTML = '点击复制';
                button.style.marginTop = '10px';
                button.addEventListener('click', function () {
                    // 选中，执行复制
                    input.select();
                    document.execCommand('copy');
                });
                body.append(button);
            }
        }
    }
}

 

上传前：

 

 上传后：