使用 JavaScript 将相机图像上传到服务器

Question

我正在编写一个网页，用户可以在其中使用他的 phone 相机拍照，然后图像将被处理并存储在服务器中。

我将图像内容存储在 上并用 标签显示，但我不知道如何将该信息发送到服务器。

Answer 1

我刚刚通过将 canvas 内容转换为 blob 并使用 fetch:

将其发送到服务器来解决了这个问题

Canvas 到 blob

someButton.onclick = (e) => {
   //some previous code
    canvas.toBlob(upload)
}

上传功能

function upload(blob) {
    const form = new FormData();
    form.append("img_name",blob)
    fetch("/path/to/api", {
        method:'POST',
        body:form,
    }, ).then(res => res.text()).then(resp => console.log(resp))
}

然后服务器根据需要处理文件。