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

Question

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

我有一个应用程序，我将图像上传到端点-URL，处理后我会收到响应。到目前为止工作正常。从 SAPUI5 使用 FileUploader-Control 时，文件包含在表单数据对象中。

从文件上传切换到 "taking a picture with smartphone-camera" 时，我没有文件，我有一个 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: 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：无法读取属性 'status' of undefined at 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 很重要。我应该提到没有明确的 post。如果 uploadUrl 设置正确，无论如何都会触发 post。

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

至于格式化程序来确定 URLs，这取决于您的设置。在下面的例子中，流是在当前的绑定contect 上设置的，在这种情况下，这是一种方法。您将需要整个 uri，因此包括 /sap/opu/... 等位。

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

URL for attachments 类似，但一般指向附件服务本身的一个实体。

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

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

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

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

JavaScript Blob to FormData with SAPUI5 mobile app

javascript

blob

image

form-data

sapui5