以往用到图片上传功能都是直接使用现成的插件,今天把其中用到的知识点整理一下。
知识点字典
- input 标签之 file 类型
- FileReader 对象:读取文件
- FileReader.readAsDataURL():将读取的文件转换为 base64 编码的字符串
- FormData 对象
- 使用 axios 上传
input 标签之 file 类型
当设置 input 标签 type 为 file 时,input 表现性状为上传文件样式
file-input 有如下属性:
- accept
- 指定选择文件类型的范围。默认为所有文件类型
- 图片为 accept="image/*"
- 文件类型取值见MDN
- capture
- 当文件类型为图片或视频且在移动端时,此属性才有意义。
- capture = 'user' 调用前置摄像头