XMLHttpRequest和Fetch文件上传

XMLHttpRequest 实现文件上传

  //XHR 文件上传可以查看进度const uploadBtn = document.querySelector(".upload")uploadBtn.onclick = function(){//1.创建对象const xhr = new XMLHttpRequest()//2.监听结果xhr.onload = function(){console.log(xhr.response)}// 文件上传进度xhr.onprogress = function(event){console.log(event)}xhr.responseType ="json"xhr.open("post","http://123.207.32.32:1888/02_param/upload")//表单const imgEl = document.querySelector("input")// 获取文件const file = imgEl.files[0]const formData = new FormData()formData.append("avatar",file)xhr.send(formData)}

Fetch文件上传

  const uploadBtn = document.querySelector(".upload")uploadBtn.onclick = async function(){const imgEl = document.querySelector("input")// 获取文件const file = imgEl.files[0]const formData = new FormData()formData.append("avatar",file)const response = await fetch("http://123.207.32.32:1888/02_param/upload",{method:"post",body:formData})const res = await response.json()console.log("res",res)}