js读取文件

1.js读取文件

/**
     * 上传图片
     * @param file 传入获取的文件
     * @author wangzhen 2018-09-07
    */
    function loadImg(file,callback){
        //建立读取文件的对象
        var reader = new FileReader();

        //建立文件读取相关的变量
        var imgFile;

        //为文件读取成功设置事件
        reader.onload=function(e) {
            // console.log('文件读取完成');
            imgFile = e.target.result;
            // console.log(imgFile);
            // $("#imgLicense").attr('src', imgFile);
            // callback(imgFile);
            callback(file);
        };

        //正式读取文件
        reader.readAsDataURL(file);
    }

2.将以base64的图片url数据转换为Blob

// -------- 将以base64的图片url数据转换为Blob --------
    function convertBase64UrlToBlob(urlData, filetype){
        //去掉url的头，并转换为byte
        var bytes = window.atob(urlData.split(',')[1]);
        
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        var i;
        for (i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }

        return new Blob([ab], {type : filetype});
    }

3.input获取

3.1 html部分

<div class="file-box">
                        <input type="file" class="file-btn" @change="uploadImg($event)" readonly="readonly"/>
                        上传图片
                    </div>

3.2 css部分

.file-box{
            display: inline-block;
            position: relative;
            padding: 3px 5px;
            overflow: hidden;
            color:#fff;
            background-color: red;
            border-radius: 5px;
        }
        .file-btn{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            outline: none;
            background-color: transparent;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;
        }

3.3 js部分

function uploadImg(event){
        // console.log(event);
        var imgFile = event.target.files[0];
       //传递参数fd
       var fd = new FormData();
        fd.append("file",imgFile);
    }