canvas截图的内容 如何通过formData上传到后端服务器

场景

想把输入的文字，截图下来 并且通过form-data传递给后端 生成链接

首先我是用的html2canvas这个插件 传递进去dom 获取到canvas 然后把canvas转成blob对象 然后生成File 将file append进formData 我和后端协定的传递字段是uploadFile 然后把formData传递给后端 并且修改请求头为application/form-data

html2canvas(document.querySelector("#capture")).then(canvas => {
    // 获取到canvas
    canvas.toBlob(blob => {
      // 将二进制对象的内容 转成file
      const file = new File([blob], Date.now() + '.png', { type: 'image/png' })
     // formData插入uploadFile相关数据
      const formData = new FormData()
      formData.append('uploadFile', file)
      // 发起请求 修改请求头为application/form-data
      axios.post('/upload', formData,
    	{headers: { 'Content-Type': 'application/form-data' }})
	  .then(function (response) {
	    // 上传成功 执行对应操作
		console.log(response);
	   })
	   .catch(function (error) {
	     // 上传失败 执行对应操作
		 console.log(error);
	    });
     }, 'image/png')
});

希望这篇文章可以帮助到你~