【学习打卡】第14天 Web前端架构师

课程名称：Web前端架构师
课程章节：12周 通用上传组件开发以及使用
主讲老师：张轩

课程内容

Vue3愉快地入门了，然后架构师这门课也是张轩老师讲的，但是之前走马观花地看了看，学了Vue3+TS仿知乎的课有更深的体会了，温习一下这个上传组件的升级版！
这周的内容有组件上传的基本实现、结合测试和源码分析。
上传组件的需求实现：根据状态切换视图（未传输、正在上传、上传成功、上传失败）、手动上传、上传校验、拖拽上传、预览图片和移除上传。
拖拽上传的实现使用了一个events对象，然后把所有组件的事件监听方法囊括进去，仅需要v-on就可以监听那么多的事件方法，惊呆了。我之前一直没有使用过这种方式…
预览图片可以使用两种API，分别是URL.createObjectURL和FileReader.readAsDataURL，前者使用本地路径bob对象后者生成base64便于操作。

URL.createObjectURL(object)
FileReader.readAsDataURL

const fileReader = new FileReader()
fileReader.readAsDataURL(uploadedFile)
fileReader.addEventListener('load', () => {
    fileObj.url = fileReader.result as string
})

TDD开发是先写测试代码然后，然后写组件，以保证组件符合预期，不过测试模拟的事件有时候会没法拿到对应的推断，可以用到比较hack的方法，比如object.defineProperty
最后讲的源码部分，现在的代码已经有变化了，主要是用了setup指令简洁了许多，基本的构造课程大部分也实现了。

课程收获

温故而知新确有道理，现在拓展了上传组件的写法和缩略图的生成方法，趁热打铁打算参考elementPlus、antd vue和arco自己写一个比较完善的上传组件，fight!