axios 上传文件_前端图片上传方案详解

以往用到图片上传功能都是直接使用现成的插件，今天把其中用到的知识点整理一下。

知识点字典

• input 标签之 file 类型
• FileReader 对象：读取文件
• FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串
• FormData 对象
• 使用 axios 上传

input 标签之 file 类型

当设置 input 标签 type 为 file 时，input 表现性状为上传文件样式

file-input 有如下属性：

1. accept
2. 指定选择文件类型的范围。默认为所有文件类型
3. 图片为 accept="image/*"
4. 文件类型取值见MDN
5. capture
6. 当文件类型为图片或视频且在移动端时，此属性才有意义。

• capture = 'user' 调用前置摄像头