How to send/post files as form data (an AJAX post) to backend service using upload collection

问题

I was using upload collection for uploading files/attachments as :

XML :

<UploadCollection
            id="UploadCollection"
            maximumFilenameLength="55"
            maximumFileSize="10"
            multiple="true"
            change="onChange"
            fileType="jpg,pdf,docx,xlsx,pptx,tif,png"
            fileSizeExceed="onFileSizeExceed"
            filenameLengthExceed="onFilenameLengthExceed"
            fileDeleted="onFileDeleted"
            selectionChange="onSelectionChange"
            typeMissmatch="onTypeMissmatch"
            uploadComplete="onUploadComplete"
            fileRenamed="onFileRenamed"
            noDataText = "No Files Attached"
            beforeUploadStarts="onBeforeUploadStarts"
            items="{
                path: 'filemodel>/items',
                templateShareable: false
            }"
            mode="MultiSelect"
            class = "fileupload"
            >
            <toolbar>
                <OverflowToolbar id="myId" width="97%">
                    <Title id="attachmentTitle" />
                    <ToolbarSpacer/>
                    <Button
                        id="downloadButton"
                        text="Download"
                        press="onDownloadItem"
                        enabled="false"
                        type="Transparent" />
                    <UploadCollectionToolbarPlaceholder/>
                </OverflowToolbar>
            </toolbar>
            <items>
                <UploadCollectionItem
                    documentId="{filemodel>documentId}"
                    fileName="{filemodel>fileName}"
                    mimeType="{filemodel>mimeType}"
                    thumbnailUrl="{filemodel>thumbnailUrl}"
                    url="{filemodel>url}"
                    enableEdit="false"
                    enableDelete="true"
                    visibleDelete="true"
                    visibleEdit="false"
                    selected="{filemodel>selected}">
                </UploadCollectionItem>
            </items>
        </UploadCollection>

and in the controller :

I hope these two are the functions which are used for uploading attachments ,

 onBeforeUploadStarts: function(oEvent) {
        // Header Slug
        var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({
            name: "slug",
            value: oEvent.getParameter("fileName")
        });
        oEvent.getParameters().addHeaderParameter(oCustomerHeaderSlug);
    },

onUploadComplete: function(oEvent) {
        var oUploadCollection = this.byId("UploadCollection");
        var oData = oUploadCollection.getModel("filemodel").getData();
            var aItems = jQuery.extend(true, {}, oData).items;
            var oItem = {};
            var sUploadedFile = oEvent.getParameter("files")[0].fileName;
            var sDate = oEvent.getParameter("files")[0].headers.date;
            var fileType = sUploadedFile.split('.')[1];
            // at the moment parameter fileName is not set in IE9
            if (!sUploadedFile) {
                var aUploadedFile = (oEvent.getParameters().getSource().getProperty("value")).split(/\" "/);
                sUploadedFile = aUploadedFile[0];
            }
            oItem = {
                "documentId": jQuery.now().toString(), // generate Id,
                "fileName": sUploadedFile,
                "mimeType": "",
                "thumbnailUrl": "",
                "url": "",
                "uploadedDate": sDate
            };
            aItems.unshift(oItem);
            this.byId("UploadCollection").getModel("filemodel").setData({
                "items": aItems
            });

            oUploadCollection.upload();
        setTimeout(function() {
            MessageToast.show("File Successfully Uploaded.");
        }, 4000);
    }

Here , the files are shown in the browswer on selecting from local machine ,

Now I am trying to send this files to a back end service , what i have been sending is as:

var oUploadCollection = this.byId("UploadCollection");
var oData = oUploadCollection.getModel("filemodel").getData();
var fileData = oData.items();

I am sending this fileData as a string to backend service , but this doesn't seem to work , May I know the format which is usually used to send files in AJAX post to a backend servise , especially when we use the UploadCollection in SAP UI5

A similar Q was asked here :

https://answers.sap.com/questions/12068846/multiple-file-uploads-using-upload-collection-cont.html

After trying a lot of ways , one way had got me the file info as:

in onChange method :

onChange: function(oEvent) {
        var oUploadCollection = oEvent.getSource();
        // Header Token
        
        var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({
            name: "x-csrf-token",
            value: "securityTokenFromModel"
        });
        oUploadCollection.addHeaderParameter(oCustomerHeaderToken);
        
        var files =  oEvent.getParameter("files")[0];
        console.log(files);
    },

logged in console as:

File {name: "sample.pdf", lastModified: 1592978930062, lastModifiedDate: Wed Jun 24 2020 11:38:50 GMT+0530 (X X X), webkitRelativePath: "", size: 465329, …}
lastModified: 1592978930062
lastModifiedDate: Wed Jun 24 2020 11:38:50 GMT+0530 (X X X) {}
name: "sample.pdf"
size: 465329
type: "application/pdf"
webkitRelativePath: ""

If the backend service is JAVA , may i know how could I send this files as formData something as an AJAX Post

Any help , suggestions or a guiding link is much appreciated , TIA

来源：https://stackoverflow.com/questions/63052663/how-to-send-post-files-as-form-data-an-ajax-post-to-backend-service-using-uplo