时间戳

首页 > 解决方案 > sap.m.UploadCollection 拖放问题 sapui5 1.52.9

file-upload - sap.m.UploadCollection 拖放问题 sapui5 1.52.9

问题描述

从 SAPUI5 版本 1.44.24 开始，我们一直在使用控件 sap.m.UploadCollection。我们正在使用具有属性 instantUpload="false" 的控件。在更改事件中，我们使用以下代码将 x-csrf-token 添加为标头参数，并且它正在工作：

var oModel = this.getView().getModel();
var oUploadCollection = oEvent.getSource();
oModel.refreshSecurityToken();
var oHeaders = oModel.oHeaders;
var sToken = oHeaders['x-csrf-token'];
// Header Token
var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({
    name: "x-csrf-token",
    value: sToken
    });
oUploadCollection._oFileUploader.setUploadUrl(url);
oUploadCollection.addHeaderParameter(oCustomerHeaderToken);

现在我们将 SAPUI5 升级到 1.52.9，并且拖放功能似乎已添加到控件中。如果我们不使用拖放功能，一切正常。现在，如果我们使用拖放功能，则会在更改事件中添加标头参数。

现在的问题是我在调用上传方法时收到 405（不允许方法），我们手动调用该方法，因为 InstantUpload 设置为 false。

当我调试上传方法时，似乎标头参数丢失或不存在于 FileUploader-dbg.js 控制器中，标头参数不存在于 aRequestHeaders 数组中。如果我在没有拖放功能的情况下调试添加的“常规”文件，则 header 参数设置在 aRequestHeaders 数组中。对这个问题有任何帮助吗？

第一张图片显示了参数不存在的问题：拖放问题。

第二张图片显示了一个工作场景：Working Scenario。

xml 视图如下所示：

<form:content>
<UploadCollection id="UploadCollection" maximumFilenameLength="155" multiple="false" change="onChange" instantUpload="false" fileDeleted="onFileDeleted" filenameLengthExceed="onFileNameExceed" fileSizeExceed="onFileSizeExceed" typeMissmatch="onTypeMissmatch"
uploadComplete="onUploadComplete" beforeUploadStarts="onBeforeUploadStarts" selectionChange="onSelectionChange"                                 uploadTerminated="onUploadTerminated" noDataText="{i18n>textnoAttachment_Invoice}" mimeType="application/pdf" fileType="pdf, PDF">
</UploadCollection>
</form:content>

控制器基于成功的 OData 调用，如下所示：

_onCreateSuccess: function(oCheckIn) {

    var oModelControlsUI = this.getView().getModel("controlsUI");
    oModelControlsUI.setProperty("/buttonSubmitEnable", false);
    oModelControlsUI.setProperty("/buttonCancelEnable", false);
    var sId = oCheckIn.WiId;
    var oModel = this.getModel();
    var BindingContext = this.getView().getBindingContext();
    var objectView = BindingContext.getObject();
    objectView.WiId = sId;
    this._sId = sId;

    // Create a new entry in the Model with the newly created entry         
    var oFormInfoContext = oModel.createEntry("/CheckInProcSet", {
        properties: objectView
    });

    //Bind the element to the view not just the form
    this.getView().setBindingContext(oFormInfoContext);
    oModel.refresh();

    //Upload the attachment
    var oCollection = this.getView().byId("UploadCollection");
    oCollection.upload();

}

onBeforeUploadStarts 方法如下所示：

        onBeforeUploadStarts: function(oEvent) {
            // Header Slug
            // Add additional parameter
            //          Get the Model for the form 
            var oModel = this.getModel();
            this.getView().setModel(oModel);
            var BindingContext = this.getView().getBindingContext();
            var objectView = BindingContext.getObject();
            var workitemID = objectView.WiId;
            var doctype = objectView.Ncitype;

            var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({
                name: "slug",
                value: oEvent.getParameter("fileName") + "|" + workitemID + "|" + doctype
            });

            oEvent.getParameters().addHeaderParameter(oCustomerHeaderSlug);
            // Request the returned entity in JSON format so that we can insert
            // the uploaded file into the upload collection for display
            oEvent.getParameters().addHeaderParameter(new sap.m.UploadCollectionParameter({

                name: "accept",
                value: "application/json"
            }));
},

如果您需要更多信息，请与我们联系。

谢谢

标签： file-uploadsapui5sap-fiori

解决方案

这是 GitHub 上报告的问题（GitHub 问题 2199）。asnwer 在 GitHub 中，但基本上是：

SAP 建议我们使用 beforefileuploadStart 事件而不是 change 事件来设置 header 参数。这是有效的。这种方法也有一些限制。oEvent 对象没有文件详细信息，例如文件大小、上传时间等。它只有文件名。

谢谢你

推荐阅读