我正在尝试遵循一些API文档，其中提供了以下示例：
$("#submit").click(function () {
var data = new FormData();
var files = $('#fileUpload').get(0).files;
if (files.length > 0) {
data.append("attachment[file]", files[0]);
data.append("mediaExtension", "jpg");
}
$.ajax({
type: "post",
url: "http://[ur]/api/Interaction/InteractionCreateLocationResultAsMedia",
data: data,
mimeType: "multipart/form-data",
cache: false,
contentType: false,
processData: false,
success: function (data) {
//do stuff
},
error: function (data, resultstatus, xhr) {
alert("api call failed" + xhr);
}
});
但是，我没有使用文件上传来创建图像。该图像实际上是从html5 canvas创建的。我可以成功地将canvas转换为base64数据，然后将其提交到我的服务器，这时它将返回一个URL，该URL指向图像在我服务器上的位置-因此，我想将该URL（或者也许是base64数据）传递给API使用上面的示例代码，但是当我使用下面的方法时，我感觉它不起作用，因为在从API返回给我的数据中，“ MediaData”键值为空。
有人知道将我的图片传递到此API的正确方法吗？
我想通了-答案是创建一个@Musa mentioend的blob。我使用以下方法：
var imgSrc = $('.image-container').find('img').attr('src');
var dataURLToBlob = function(dataURL) {
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = decodeURIComponent(parts[1]);
return new Blob([raw], {type: contentType});
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
var apiData = new FormData();
apiData.append( "attachment[file]", blob);
$.ajax({
url: submissionURL,
type: "post",
dataType: 'json', //return response as json
mimeType: "multipart/form-data",
cache: false,
contentType: false,
processData: false,
data: apiData,
error: function(data,resultstatus,xhr) {
console.error("error:",data,resultstatus,xhr);
},
success: function(){
//
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句