在 formdata 中附加创建的图像文件答案

【问题标题】：Append created image file in formdata在 formdata 中附加创建的图像文件
【发布时间】：2019-03-18 19:38:15
【问题描述】：

我使用画布创建了一个图像。我想在表单数据而不是 url 中附加确切的图像文件。这是我的代码。

<video></video>

<button type="button" onclick="turnOn()">turn on cam</button>
<button type="button" onclick="takeSnapshot()">capture image</button>


<script>
    function turnOn() {
         document.getElementsByTagName('video')[0].play();

         var video = document.querySelector('video')
          , canvas;

        if (navigator.mediaDevices) {
           navigator.mediaDevices.getUserMedia({video: true})
            .then(function(stream) {
              video.src = window.URL.createObjectURL(stream);
            })
            .catch(function(error) {
              document.body.textContent = 'Could not access the camera. Error: ' + error.name + " " + error.message;
            });
        }
    }

    function takeSnapshot() {
        var video = document.querySelector('video')
          , canvas;

        var img = document.querySelector('img') || document.createElement('img');
        var context;
        var width = video.offsetWidth
            , height = video.offsetHeight;

        canvas = canvas || document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;

        context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, width, height);

        img.src = canvas.toDataURL('image/png');
        document.body.appendChild(img);

        var fd = new FormData(document.forms[0]);
        fd.append("image", img);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/api/file/upload",
            data: fd,
            processData: false,
            contentType: false,
            cache: false,
            success: (data) => {
                alert("yes");
            },
            error: function(xhr, status, error) {
                  alert(xhr.responseText);
                }
        });
    }

</script>

它正在附加 blob 文件“��...”，我希望它附加确切的图像文件。我以前没有使用过这个，似乎无法理解其他教程。希望你能帮助我。非常感谢！！！

编辑：我已经编辑了代码并尝试在正文上附加我要附加的相同图像。但它不起作用..

【问题讨论】：

你能把你的html也发一下吗？这里没有足够的东西让我重现这个问题。见Minimal, Complete, and Verifiable example
@RockySims 你好！我已经对其进行了编辑并发布了整个代码。希望你能帮助我。我想在表单数据上附加确切的图像。我用 blob 试过它，它正在工作。但是当我附加图像文件时它不是。
不应该是fd.append("image", img.src);而不是fd.append("image", img);吗？另外，我不清楚您所说的“我想附加确切的图像”而不是“blob 文件”是什么意思。如果不是代表图像数据的一堆看起来乱码的文本，那么作为发布数据的“精确图像”会是什么样子？
另外，我觉得您发布的代码与您在本地运行的代码不太一样，因为当我运行它时（添加 jquery 后），我看到帖子数据为 @987654325 @ 不是像“��...”这样的 blob。
我编辑了它。因为我在通过 ajax 发送文件后将文件保存在本地。我尝试获取字符串并将其保存到我的本地文件中并且它可以工作，但是正在保存的文件是 blob "��..." 文本。将“img”附加到正文后，我还想通过 ajax 以 image.png 格式传递图像。 :) 我尝试使用 img.src 并返回一个错误，即“所需的请求部分'图像'不存在”。

标签： javascript canvas append multipartform-data form-data

【解决方案1】：

您可以尝试将 canvas.toDataURL('image/png') 返回的基于 64 位编码的内联图像转换为使用 document.getElementById("file").files[0] 时从 <input id="file" type="file"></input> 元素获得的相同类型的 File 对象，并将其附加到 fd。

要尝试一下，请更改

var fd = new FormData(document.forms[0]);
fd.append("image", img);

$.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
    url: "/api/file/upload",
    data: fd,
    processData: false,
    contentType: false,
    cache: false,
    success: (data) = > {
        alert("yes");
    },
    error: function(xhr, status, error) {
        alert(xhr.responseText);
    }
});

到

fetch(img.src)
    .then(res => res.blob())
    .then(blob => {
        const file = new File([blob], "capture.png", {
            type: 'image/png'
        });
        var fd = new FormData();
        fd.append("image", file);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/api/file/upload",
            data: fd,
            processData: false,
            contentType: false,
            cache: false,
            success: (data) => {
                alert("yes");
            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });

【讨论】：