使用SAPUI5移动应用程序将JavaScript Blob转换为FormData

我知道关于这个主题有好几条线索，但我无法确定我的案例中的问题

我有一个应用程序，在那里我上传一个图像到一个端点URL，处理后我将收到一个响应。到目前为止效果很好。从SAPUI5使用FileUploader控件时，该文件包含在formdata对象中

当从文件上传切换到“用智能手机相机拍照”时，我没有文件，我有一个base64 dataurl（XString）图像对象

var oImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAA…8ryQAbwUjsV5VUaAX/y+YSPJii2Z9GAAAAABJRU5ErkJggg=="} // some lines are missing > 1 million lines

我认为将其转换为blob并将其附加到FormData可能是解决方案，但它根本不起作用

var blob = this.toBlob(oImage)
console.log("Blob", blob); // --> Blob(857809) {size: 857809, type: "image/png"} size: 857809 type: "image/png" __proto__: Blob 

var formData = new window.FormData();
formData.append("files", blob, "test.png");
console.log("FormData", formData); // seems empty --> FormData {}__proto__: FormData

功能（从我的角度看效果很好）

toBlob：函数dataURItoBlob（dataURI）{
var byteString=atob（dataURI.split（'，'）[1]）；
var mimeString=dataURI.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]
var ab=新阵列缓冲区（byteString.length）；
var ia=新的UINT8阵列（ab）；
for（var i=0；i

这就是我的问题，FormData是空的，我的POST请求抛出了一个未定义的错误（加载数据失败：TypeError:无法读取constructor.eval（…m/resources/sap/ui/core/library preload.js？eval:2183:566））上未定义的属性“status”）

//使用URL创建JSON模型
var oModel=new sap.ui.model.json.JSONModel（）；
var sHeaders={
“内容类型”：“多部分/表单数据；边界=--01100001110000101001”，
“APIKey”：”
};
变量oData={
formData
};
loadData（“/my destination/service”，oData，true，“POST”，null，false，sHeaders）；
oModel.attachRequestCompleted（函数（oEvent）{
var oData=oEvent.getSource（）.oData；
日志（“最终响应XHR:，oData”）；
});

感谢您的提示

这是一个复杂的标准控件，可用于附件管理。在桌面上，它会打开一个文件对话框；在移动设备上，它会打开ios或android照片选项，这意味着从相机卷中选择一张照片，或者拍摄一张新照片

相当基本的示例，包括上载URL和您需要的其他处理程序。更多选项可用，请根据您的需要进行调整。在XML中：

<UploadCollection 
    uploadUrl="{path:'Key',formatter:'.headerUrl'}/Attachments" 
    items="{Attachments}" 
    change="onAttachUploadChange" 
    fileDeleted="onAttachDelete" 
    uploadEnabled="true"
    uploadComplete="onAttachUploadComplete">
    <UploadCollectionItem 
        documentId="{DocID}"
        contributor="{CreatedBy}" 
        fileName="{ComponentName}" 
        fileSize="{path:'ComponentSize',formatter:'.formatter.parseFloat'}" 
        mimeType="{MIMEType}" 
        thumbnailUrl="{parts:[{path:'MIMEType'},{path:'DocID'}],formatter:'.thumbnailURL'}" 
        uploadedDate="{path:'CreatedAt', formatter:'.formatter.Date'}" url="{path:'DocID',formatter:'.attachmentURL'}" visibleEdit="false" 
        visibleDelete="true" />
</UploadCollection>

至于确定URL的格式化程序，这取决于您的设置。在下面的例子中，流是在当前绑定上下文上设置的，在这种情况下，这是一种方法。您将需要整个uri，以便包括

/sap/opu/…

等位

  headerUrl: function() {
    return this.getModel().sServiceUrl + this.getView().getBindingContext().getPath()
  },

附件的URL类似，但通常指向附件服务本身的实体

  attachmentURL: function(docid) {
    return this.getModel().sServiceUrl + "/Attachments('" + docid + "')/$value";
  },

您可以想象它是否是一个图像，在这种情况下，您可以包括mime类型以显示缩略图

---

也许有更好的方法可以做到这一点，但我发现这相当灵活…

在上传集合中？我想我从来没有改变过关于输入的任何事情。最后，通过pc上传的图像文件本身也是一个二进制字符串。对不起，我不理解你的评论。你指的是什么？你说的“上传收藏”是什么意思？我的意思是——我有一段时间没看到这个了——我想如果我用上传收藏打开手机摄像头，它会自动打开，上传已经开始工作了。这很有意义，因为一天结束时的文件也是一个xstring。明天上班时我会查我的代码。太好了，谢谢。同时，这是上传收集控件：谢谢！知道如何将自定义XHR头传递到上传URL吗？API要求创建UploadCollectionHeaderParameters，但在使用.upload（）到外部服务器时，这些参数不会被传递……upload change处理程序中的代码会添加类似csrf令牌的头。不确定集合是否以这种方式限制。如何@Jorg我可以知道我们如何将文件数据作为表单数据发送，类似这样的<代码>var fd=新FormData（）；fd.append（'file'，input.files[0]）。。。。sap ui5中的类似方法是什么

onAttachUploadChange: function(oEvent) {
  var csrf = this.getModel().getSecurityToken();
  var oUploader = oEvent.getSource();
  var fileName = oEvent.getParameter('files')[0].name;
  oUploader.removeAllHeaderParameters();
  oUploader.insertHeaderParameter(new UploadCollectionParameter({
    name: 'x-csrf-token',
    value: csrf
  }));
  oUploader.insertHeaderParameter(new UploadCollectionParameter({
    name: 'Slug',
    value: fileName
  }));
},

onAttachDelete: function(oEvent) {
  var id = oEvent.getParameter('documentId');
  var oModel = this.getModel();

  //set busy indicator maybe?

  oModel.remove(`/Attachments('${encodeURIComponent(id)}')`, {
    success: (odata, response) => {
      //successful removal
      //oModel.refresh();
    },
    error: err => console.log(err)
  });
},

onAttachUploadComplete: function(oEvent) {

  var mParams = oEvent.getParameter('mParameters');
  //handle errors an success in here. Check `mParams`. 
}

  headerUrl: function() {
    return this.getModel().sServiceUrl + this.getView().getBindingContext().getPath()
  },

  attachmentURL: function(docid) {
    return this.getModel().sServiceUrl + "/Attachments('" + docid + "')/$value";
  },