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

功能（从我的角度来看很好用）

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：在构造函数中无法读取未定义的属性“状态”。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的方法，这取决于您的设置。在以下情况下，流是在当前绑定连接上设置的，在这种情况下，这是一种处理方法。您将需要整个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类型以显示缩略图。

也许会有更好的方法，但是我发现它相当灵活...

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

1 个答案: