Facebook Javascript表单数据照片上传:需要上传文件错误

Facebook Javascript表单数据照片上传:需要上传文件错误,javascript,facebook,facebook-graph-api,photo,multipartform-data,Javascript,Facebook,Facebook Graph Api,Photo,Multipartform Data,我已经搜索了15个多小时,几乎每一个线程,并没有找到我的问题的答案。我严格使用Javascript使用表单数据将照片上传到Facebook。我从JPEG图像svg->canvas元素中解码base64数据,使用此解码方法,然后将其转换为数据格式的字符串,如不使用XMLHttpRequest。然后我将该字符串作为源参数放在post中。我一直收到一个324需要上传的文件。如果我只是为图像输入一个url,它就可以完美地工作。有人能帮忙吗?谢谢 // The function to post the i

我已经搜索了15个多小时,几乎每一个线程,并没有找到我的问题的答案。我严格使用Javascript使用表单数据将照片上传到Facebook。我从JPEG图像svg->canvas元素中解码base64数据,使用此解码方法,然后将其转换为数据格式的字符串,如不使用XMLHttpRequest。然后我将该字符串作为源参数放在post中。我一直收到一个324需要上传的文件。如果我只是为图像输入一个url,它就可以完美地工作。有人能帮忙吗?谢谢

// The function to post the image:
FB.api("/me/photos", 
          "POST",
          {
              "source": window.image_source,
              "message": "...",
              "fileName": "..."
          },
          function(response) {
            console.log(response.error);
            }
      });

// How I got the image_source:
var img = canvas.toDataURL("image/jpeg");
var encoded = img.substring(img.indexOf(',')+1,img.length);
var decoded = decode(encoded);
convertToFormData(decoded);

function convertToFormData(imageData) {
    var boundary = 'myboundary';

    var formData = "Content-Type: multipart/form-data; boundary=" + boundary + '\r\n\r\n';
    formData += '--' + boundary + '\r\n';
    formData += 'Content-Disposition: form-data; name="source"; filename="' + "myfile" + '"\r\n';
    for ( var i = 0; i < imageData.length; ++i )
        formData += String.fromCharCode(imageData[i] & 0xff);
    formData += '\r\n';
    formData += '--' + boundary + '\r\n'+ 'Content-Disposition: form-data; name="message"\r\n\r\n';
    formData += "Description" + '\r\n';
    formData += '--' + boundary + '--\r\n';

    window.image_source = formData;
  }

function decode(input) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var lkey1 = keyStr.indexOf(input.charAt(input.length-1));    
    var lkey2 = keyStr.indexOf(input.charAt(input.length-2));    
    var bytes = (input.length/4) * 3;
    if (lkey1 == 64) bytes--; 
    if (lkey2 == 64) bytes--; 
    var chr1, chr2, chr3; var enc1, enc2, enc3, enc4;
    var i = 0;var j = 0;

    var uarray = new Uint8Array(bytes);
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

    for (i=0; i<bytes; i+=3) {  
      enc1 = keyStr.indexOf(input.charAt(j++));
      enc2 = keyStr.indexOf(input.charAt(j++));
      enc3 = keyStr.indexOf(input.charAt(j++));
      enc4 = keyStr.indexOf(input.charAt(j++));

      chr1 = (enc1 << 2) | (enc2 >> 4);
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
      chr3 = ((enc3 & 3) << 6) | enc4;

      uarray[i] = chr1;     
      if (enc3 != 64) uarray[i+1] = chr2;
      if (enc4 != 64) uarray[i+2] = chr3;
    }
    return uarray;  
  }

您必须将画布图像变成一个Blob,才能将其上载到Facebook:

const dataURItoBlob = (dataURI) => {
    let byteString = atob(dataURI.split(',')[1]);
    let ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: 'image/jpeg'
    });
}

来源:

你解决了吗?我也有同样的问题;
formData.append('source', blob);