常规文件上传

1. 首先在页面配置一个元素：

   <input type="file" name="file" id="file" accept="image/*" >
   
   <!-- 使用label触发 -->
   <label for="file">
     <button type="button">上传</button>
   </label>

2. 监听选择文件事件：

   const fileEl = document.querySelector('#file')
   
   const onUploadFileChange = function(event){
     // 文件对象
     const file = event.target.files[0]
   
     // 展示
     const fileReader = new FileReader()
     fileReader.readAsDataURL(file)
     fileReader.onload = (e)=>{
       const base64 = e.target.result
       const img = new Image(base64)
       // 用于展示
     }
   
     // 上传
     const formData = new FormData()
     formData.append('file',file.raw,file.fileName)
   
     // 上传方式 1
     const ajax = new XMLHttpRequest();
     ajax.open("POST", "http://xx.com");
     ajax.send(formData);
   
     // 上传方式 2
     axios.post("http://xx.com",formData)
   }
   
   fileEl.addEventListener('change',onUploadFileChange)

其它文件相关操作可查看：[MDN]在web应用中使用文件