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

Question

我知道有多个关于此主题的主题，但我无法确定我的案例中的问题。

我有一个应用程序，我将图像上传到端点 URL，处理后我将收到响应。到目前为止效果很好。使用 SAPUI5 中的 FileUploader-Control 时，该文件包含在 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

函数(从我的 Angular 来看工作正常)

toBlob: function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        var bb = new Blob([ab], {
            "type": mimeString
        });
        return bb;
},

这是我的问题，FormData 为空，我的 POST 请求抛出未定义的错误(加载数据失败:TypeError:无法读取 constructor.eval 处未定义的属性“状态”(...m/resources/sap/ui/core/library-preload.js?eval:2183:566))

//Create JSON Model with URL
var oModel = new sap.ui.model.json.JSONModel();
var sHeaders = {
    "content-type": "multipart/form-data; boundary=---011000010111000001101001",
    "APIKey": "<<myKey>>"
};

var oData = {
    formData
};

oModel.loadData("/my-destination/service", oData, true, "POST", null, false, sHeaders);

oModel.attachRequestCompleted(function (oEvent) {
    var oData = oEvent.getSource().oData;
    console.log("Final Response XHR: ", oData);
});

感谢您的任何提示

Answer 1

upload collection是一个复杂的标准控件，可用于附件管理。在桌面上，它会打开一个文件对话框，在移动设备上，它会打开 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>

这是处理程序。尤其是 onAttachUploadChange 很重要。我应该提到没有明确的帖子。如果 uploadUrl 设置正确，无论如何都会触发帖子。

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`. 
}

至于确定 URL 的格式化程序，这取决于您的设置。在下面的情况下，流是在当前绑定(bind)连接上设置的，在这种情况下，这是一种方法。您将需要整个 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 类型以显示缩略图。

可能有更好的方法来做到这一点，但我发现这相当灵活......