canvas转成input-file标签数据使用XMLHttpRequest模仿input-file标签上传数据

最新推荐文章于 2024-03-01 09:52:17 发布

_无往而不胜_

最新推荐文章于 2024-03-01 09:52:17 发布

阅读量264

点赞数 1

分类专栏：新ros专栏文章标签： javascript 前端 canvas input-file XMLHttpRequest

本文链接：https://blog.csdn.net/qq_15204179/article/details/129338703

版权

新ros专栏专栏收录该内容

95 篇文章 71 订阅 ¥159.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍如何将canvas转换为input-file数据，并利用XMLHttpRequest实现类似input-file标签的文件上传操作。

摘要由CSDN通过智能技术生成

canvas转成input-file标签数据使用XMLHttpRequest模仿input-file标签上传数据

var canvas = document.getElementById("myCanvas");
var dataURL = canvas.toDataURL("image/png");
var blob = dataURLToBlob(dataURL);
var file = new File([blob], "canvas.png", { type: "image/png" });

var formData = new FormData();
formData.append("file", file);

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(formData);

function dataURLToBlob(dataU