使用XMLHttpRequest上传视频

先触发input的change事件

// input的change事件
  handleFileChange = (e) => {
    const file = e.target.files[0]
    // 限制视频大小格式等
    if (file.size > 500 * 1024 * 1024) {
      message.error('视频不能大于500M')
      return
    }
    if (file.type && !file.type.includes('mp4')) {
      message.error('请上传mp4格式的视频')
      return
    }
    this.handleUploadVideo(file)
  }

如果需要展示进度条的话使用XMLHttpRequest

handleUploadVideo = （file） => {
	var xhr = new XMLHttpRequest()
	xhr.onreadystatechange = () => {
	  if (xhr.readyState === 4 && xhr.status === 200) {
	    console.log('===上传成功===', xhr)
	  }
	  if (xhr.readyState === 4 && xhr.status === 0) {
	    console.log('===上传失败===', xhr.status)
	  }
	}
	
	xhr.upload.addEventListener('progress', (event) => {
		// 监听上传进度大约每200ms触发一次
	  if (event.lengthComputable) {
	    console.log('===🚀===>', Math.ceil(event.loaded * 100 / event.total) + '%')
	  }
	}, false)
	/*
	 * setRequestHeader放在open后send前
	 **/
	// open('',上传地址)
	xhr.open('PUT', uploadUrl)
	// 添加请求头
	xhr.setRequestHeader('Content-Type', 'video/mp4')
	xhr.send(file)
}

不需要展示进度条的话可以使用fetch

handleUploadVideo = （file） => {
	//fetch(上传视频的链接,{})
	fetch(uploadUrl, {
	    method: 'put', 
	       body: file
	     }).then(res => {
	       if (res.status === 200) {
	        console.log('===上传成功===')
	       }
	     })
}

方法详情：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest