js原生实现图片上传及预览

1. 文件对象：FormData的实例

   1. html结构

      <!-- file类型的input -->
      <input type="file" id="file" multiple />
      <button onclick="sendFile()">点击获取文件对象</button>
      <!-- 一般文件上传，都是把用户选的file-input的文件对象发送给后端 -->
      <div>
        <img id='imgPreview' src="" alt="">
      </div>
      

   2. js逻辑

   function sendFile() {
     const file = document.querySelector('#file')
     const fileObj = file.files[0]
     console.log(file.files[0])
     // 然后把文件对象放到 FormData 中提交给后端
     const fd = new FormData()
     fd.append('字段名称', fileObj)
     // 如果是图片文件，可以处理图片预览
     const blob = window.URL.createObjectURL(fileObj)
     // blob 数据可以直接赋值给图片的src展示
     document.querySelector('#imgPreview').src = blob
   }