Javascript Facebook API POST multipart/form-data
Javascript Facebook API POST multipart/form-data
在过去的几天里,我一直被这个问题完全难住了。如果有人能指出我正确的方向,我将不胜感激!我一直在试图弄清楚如何通过Facebook的图形api发布图像。
我有一张通过他们的图形 API 从 Facebook 下载的图像,该图像正确显示在画布元素中。我正在通过在上面绘制文本来修改此元素,然后想将其上传回Facebook。我被困在上传上。
以下是我查看过的链接,这些链接很有帮助,但我仍然卡住了:
Facebook Graph API - 使用 JavaScript 上传照片讨论使用多部分/表单数据通过发布请求上传到Facebook。
https://gist.github.com/andyburke/1498758用于创建多部分表单数据并向 Facebook 发送发布图像的请求的代码。
这是我用来尝试将图像发布到Facebook
的代码if ( XMLHttpRequest.prototype.sendAsBinary === undefined ) {
XMLHttpRequest.prototype.sendAsBinary = function(string) {
var bytes = Array.prototype.map.call(string, function(c) {
return c.charCodeAt(0) & 0xff;
});
//this.send(new Uint8Array(bytes).buffer); //depreciated warning
this.send(new Uint8Array(bytes));
};
}
// This function takes an array of bytes that are the actual contents of the image file.
// In other words, if you were to look at the contents of imageData as characters, they'd
// look like the contents of a PNG or GIF or what have you. For instance, you might use
// pnglib.js to generate a PNG and then upload it to Facebook, all from the client.
//
// Arguments:
// authToken - the user's auth token, usually from something like authResponse.accessToken
// filename - the filename you'd like the uploaded file to have
// mimeType - the mime type of the file, eg: image/png
// imageData - an array of bytes containing the image file contents
// message - an optional message you'd like associated with the image
function PostImageToFacebook( authToken, filename, mimeType, imageData, message )
{
console.log("filename " + filename);
console.log("mimeType " + mimeType);
console.log("imageData " + imageData);
console.log("message " + message);
// this is the multipart/form-data boundary we'll use
var boundary = '----ThisIsTheBoundary1234567890';
// let's encode our image file, which is contained in the var
var formData = '--' + boundary + ''r'n'
formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"'r'n';
formData += 'Content-Type: ' + mimeType + ''r'n'r'n';
for ( var i = 0; i < imageData.length; ++i )
{
formData += String.fromCharCode( imageData[ i ] & 0xff );
}
formData += ''r'n';
formData += '--' + boundary + ''r'n';
formData += 'Content-Disposition: form-data; name="message"'r'n'r'n';
formData += message + ''r'n'
formData += '--' + boundary + '--'r'n';
var xhr = new XMLHttpRequest();
xhr.open( 'POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true );
xhr.onload = xhr.onerror = function() {
console.log( xhr.responseText );
};
xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
xhr.sendAsBinary( formData );
console.log(formData);
}
调用PostImageToFacebook函数会导致以下错误:
{
"error": {
"type": "Exception",
"message": "Your photos couldn't be uploaded. Photos should be less than 4 MB and saved as JPG, PNG, GIF or TIFF files.",
"code": 1366046
}
我记录了表单数据,我粘贴了下面的输出:
------这是边界1234567890
Content-Disposition: form-data; name="source"; filename="MemeImage.png"
内容类型:图像/png
------这是边界1234567890
内容处置:表单数据;名称="消息"
发布模因图片
------这是边界1234567890--
尝试替换
for ( var i = 0; i < imageData.length; ++i )
{
formData += String.fromCharCode( imageData[ i ] & 0xff );
}
跟
formData += imageData;
这可以通过更简单的方式实现,只需使用以下代码将 Canvas 图像转换为博客:
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 一起使用即可:
formData.append('source', blob);
来源: http://www.devils-heaven.com/facebook-javascript-sdk-photo-upload-from-canvas/
- ExtJS使用控制器中的View Form Data作为Ajax请求参数
- 使用AJAX jquery时奇怪的“urlencoded”和“multipart/form-data”内容
- XMLHttpRequest multipart/form数据:multipart中的边界无效
- jquery Form - Data
- 为什么我需要包含enctype="multipart/form-data"当通过表单发送数据时,但通
- AJAX调用在Header / form-data中返回undefined
- 使用jQuery's Form Data()和Ajax提交文件失败
- Angular multipart/form-data表单发送
- 如何在multipart/form-data - Angular中获取或设置边界
- 文件上传使用base64编码的文本而不是multipart/form-data -好主意
- Node.js multipart/form-data本地文件上传到api
- 如何从表单中提交“multipart/form-data”并让你的函数被调用
- 在Node.js中解析Buffer中的multipart/form-data
- 尝试用node.js supertest发布multipart/form-data
- 使用symfony2从post Multipart (Content-Disposition: form-data)中获
- 我可以使用enctype='multipart/form-data'POST非文件输入
- Javascript有一个图像作为URI数据,我如何通过multipart/form-data表单上传这个图像
- Javascript Facebook API POST multipart/form-data
- 如何将文件发送到multipart/form-data
- XMLHttpRequest POST multipart/form-data