前端图片压缩上传和显示

最近在写一个修改头像的功能，涉及到图片的压缩上传和显示，主要用到了以下几个知识点：

• 利用input [type=”file”]上传图片
• 利用FileReader的readAsDataURL读取图片将其转为base64

• 当图片很大的时候利用canvas进行图片压缩

  ---

  关于input [type=”file”]

• type 类型为 file 的 input 元素，让用户可以选择一个或多个元素以提交表单的方式上传到服务器上, 或者通过 Javascript 的 File API 对文件进行操作。
• 可以用通过监听change事件来监听input file中文件的变化
• 属性值有以下几个比较常用：
  
  • accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。
  • multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。
• 所有type属性为file的 input元素都有一个files属性,用来存储用户所选择的文件，在控制台输入如下

FileList {
  0: File(210251), length: 1}
    0:File(210251)
        lastModified:1526814216420
        lastModifiedDate:Sun May 20 2018 19:03:36 GMT+0800 (中国标准时间) {}
        name:"哈哈哈.png"
        size:210251
        type:"image/png"
        webkitRelativePath:""
    __proto__:File
    length:1
__proto__:FileList

可以看出来files是一个类数组对象，我们当前的文件信息被保存在FileList[0]这个File对象上，这也就是我们之后能用FileReader读取图片的原因。

---

利用FileReader读取图片

• FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区࿰