Javascript 如何将表单数据发送到表单输入[类型='；文件'；]？

我正在创建一个chrome扩展，它处理文件上传。我试图做的是下载一个图像，然后在下载后立即将其上传到并输入[type='file']

以下是表单的html格式：

<label>
  <form>
    <input accept="image/*,image/heif,image/heic" 
    class="mkhogb32" multiple="" type="file">
  </form>
</label>

这是我的代码，到目前为止：

          // load the image
      var img = new Image();
      img.setAttribute('crossOrigin', 'anonymous');
      img.src = result.products[pointer][3];

      // loaded
      img.onload = function() {
          // convert the image into a data url
          var dataUrl = getImageDataUrl(img);

          var blob = dataUrlToBlob(dataUrl);

          var form = document.getElementsByTagName('form')[1];

          // FormData will encapsulate the form, and understands blobs
          //Specifying which form to send it two
          var formData = new FormData(form);

          // "image_name.png" can be whatever you want; it's what the
          // host will see as the filename for this image (the host server
          // that receives the posted form).  it doesn't have to match the
          // original filename, and can be arbitrary or not provided at all.
          formData.append("image", blob);


          var request = new XMLHttpRequest();

         

          //POST to facebook page and it sends form data we created earlier
          request.open("POST", 'https://www.facebook.com/marketplace/create/item');
          request.send(formData);


      };


      // converts an image into a dataurl
      function getImageDataUrl(img) {
          // Create an empty canvas element
          var canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;

          // Copy the image contents to the canvas
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);


          // NOTE:  this will throw a cross-origin security exception
          // if not done in an extension and if the image is cross-origin
          return canvas.toDataURL("image/png");
      }

      // converts a dataurl into a blob
      function dataUrlToBlob(dataUrl) {
          var binary = atob(dataUrl.split(',')[1]);
          var array = [];
          for(var i = 0; i < binary.length; i++) {
              array.push(binary.charCodeAt(i));
          }
          return new Blob([new Uint8Array(array)], {type: 'image/png'});
      }

//加载图像
var img=新图像（）；
setAttribute（'crossOrigin'，'anonymous'）；
img.src=result.products[pointer][3]；
//装载
img.onload=函数（）{
//将图像转换为数据url
var dataUrl=getImageDataUrl（img）；
var blob=dataUrlToBlob（dataUrl）；
var form=document.getElementsByTagName（'form'）[1]；
//FormData将封装表单，并理解blob
//指定要发送给它的表单
var formData=新formData（表格）；
//“image_name.png”可以是您想要的任何内容；它是
//主机将作为此映像的文件名（主机服务器
//，它不必与
//原始文件名，可以是任意的，也可以根本不提供。
formData.append（“图像”，blob）；
var request=new XMLHttpRequest（）；
//发布到facebook页面，它会发送我们之前创建的表单数据
请求打开（“POST”https://www.facebook.com/marketplace/create/item');
请求。发送（formData）；
};
//将图像转换为dataurl
函数getImageDataUrl（img）{
//创建一个空的画布元素
var canvas=document.createElement（“canvas”）；
canvas.width=img.width；
canvas.height=img.height；
//将图像内容复制到画布
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0,0）；
//注意：这将引发跨源安全异常
//如果未在扩展中执行，并且图像是交叉原点
返回canvas.toDataURL（“image/png”）；
}
//将数据URL转换为blob
函数dataUrlToBlob（dataUrl）{
var binary=atob（dataUrl.split（'，）[1]）；
var数组=[]；
对于（var i=0；i

---

但是，当图像被发送到服务器时，实际上没有图像被上传到输入。有人知道我哪里出错了吗？

请仅以文本形式发布实际代码，而不是以图像形式发布。