FileReader总结

预计目标

1. 有一个上传按钮（用户点击的地方）
2. 有一个进度条
3. 可以预览，如果是图片的话

大概这样

开始

<form>
    <input type="file" id="imgInput" multiple accept="image/*">
    <br>
    <br>
    <label>读取进度：</label><progress id="progress" value="0" max="100" step="1"></progress>
    <br>
    <br>
    <img id="imgShow" src="" alt="" style="width:100px;height:100px;">
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// 尽力不再使用jQuery
let imgInput = document.querySelector('#imgInput')
imgInput.addEventListener('change', function () {
    // if (!/image\/\w+/.test(file.type)) {
    //     alert("请确保文件为图像类型");
    //     return false;
    // }
    // 获取文件
    // 获取文件大小（在progress里面也有文件大小，在此获取一次，节省资源）
    // 设置进度为0
   let file = imgInput.files[0],
        totalSize = file.size,
        loaded = 0
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file)
    fileReader.addEventListener('progress', function (e) {
        loaded += e.loaded;
        progress.value = (loaded / totalSize) * 100;
    })
    fileReader.addEventListener('load', function () {
        // res是base64格式
        let res = fileReader.result
        imgShow.setAttribute('src', res)
        const formDate = new FormData()
        formDate.append('userImage', file, imgInput.value.toString().split('\\').pop())
        // let config = {
        //     headers: {
        //         'Content-Type': 'multipart/form-data'
        //     }
        // }
        // axios
        //     .post('****', formDate, config)
        //     .then(res => {})
        //     .catch(err => {})
    })
})

支持

参考

1. 图片上传方案详解 (opens new window)
2. HTML5的FileReader的使用 (opens new window)

总结

FileReader

方法名	参数	描述
about	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为DataURL
readAsText	file,[encoding]	将文件读取为文本

readAsText用法：readAsText(file,{encoding: "UTF-8"})

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中