FileReader总结

FileReader 总结

实现目标

1. 有一个上传按钮（用户点击的地方）

2. 有一个进度条

3. 可以预览，如果是图片的话

大概这样

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 => {})
    })
})

总结

FileReader