上传图片怎么做的

创建 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>

文件清空方法:
1.给封装的组件绑定布尔值，通过v-if创建和销毁新dom
2.弹窗消失，手动将文件清空。ref同理
3.也可以给input绑定v-if 和第一条同理