前端项目中上传图片如何实现的

1.准备一个input:file 然后用hidden隐藏

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

3.监听input 的onchange 事件,在回调里面通过e.target.filer拿到文件信息

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

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

5.图片预览:URL.craterObjctURL(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