上传图片功能与图片预览功能实现

1.准备一个<input type="file" hidden> 并通过hidden属性隐藏

2.准备一个按钮，给按钮绑定点击事件，在事件的回调里面主动触发input：file的click事件

3.监听input的onchang事件，在回调里面通过e.target.files拿到文件信息

4.创建formData对象，把文件信息放进去通过axios传到后端

const form = new FormData()
form.append('avatar', e.target.files[0])

5.图片预览：URL.createObjectURL（blob）或FileReader（base64）

<input type="file" hidden id="file" />
<img id="img" alt="" />
<button id="btn">click</button>
<script>
  btn.onclick = function () {
    file.click()
  }
  file.onchange = function (e) {
    const f = e.target.files[0]

    const formData = new FormData()
    formData.append('avatar', f)
    // axios({ url: '/xxx', data: formData })
    /* const s = URL.createObjectURL(f)
       img.src = s */
    const fileReader = new FileReader()
    // 图片 => base64
    fileReader.readAsDataURL(f)
    fileReader.onload = function () {
      img.src = this.result
    }
  }
</script>