如何在Angular 4應用程序中將文件上傳到SharePoint Online庫？

Question

我正在使用Angular SPA應用程序。 我正在使用SP.js和SP.Requestor.js，這對於上傳相同的文件很有用，但似乎沒有一個可以用於Angular 4 App。

  UploadFile(event: any) {
    let fileList: FileList = event.target.files;
    let fileName;
    if (fileList.length != 0) {
        this.getFileBuffer(fileList[0]).then(result => {
            this.uploadFile(result, fileList[0].name, "POC").then(result => {
                alert("added");
            });
        });
        // this.fileUpload(fileList[0], "RetrievePOC", fileList[0].name);
    }
}



getFileBuffer(file) {
        return new Promise((resolve, reject) => {
            var myReader: FileReader = new FileReader();
            myReader.onload = function (e) {
                resolve(myReader.result);
                //resolve(e.target);
            }
            myReader.onerror = function (e) {
                //deferred.reject(e.target.error);
            }
            //myReader.readAsArrayBuffer(file);
            myReader.readAsBinaryString(file);
            //resolve(file);
            //return deferred.promise();
        });
    };



uploadFile(file, fileName, libraryName) {
        return new Promise((resolve, reject) => {
            // Construct the endpoint - The GetList method is available for SharePoint Online only.  
            //var serverRelativeUrlToFolder = "decodedurl='" + "/" + libraryName + "'";
            var endpoint = this.siteUrl + "/_api/web/lists/getByTitle('POC')/Files/add('" + fileName + "')";
            const headers = {
                "accept": "application/json;odata=verbose",
                "content-type": "application/json; odata=verbose",
            };
            //let fileData =this.convertDataBinaryString(file);
            this.executeAsync(endpoint, file, headers).then(file => resolve(true)).catch(err => reject(err));
        });

    }


executeAsync(endPointUrl, data, requestHeaders) {
        return new Promise((resolve, reject) => {
            // using a utils function we would get the APP WEB url value and pass it into the constructor...  
            let executor = new SP.RequestExecutor(this.siteUrl);
            // Send the request.  
            executor.executeAsync({
                url: endPointUrl,               
                method: "POST",
                body: data,
                binaryStringRequestBody: true,               
                headers: requestHeaders,
                success: offset => resolve(offset),
                error: err => reject(alert(err.responseText))
            });
        });
    } 

在executeAsync methond中出現以下錯誤：

ErrorPage.PostMessage：Origin = https：// localhost：44316 ，數據= {“ command”：“ Query”，“ postMessageId”：“ SP.RequestExecutor3”，“ responseAvailable”：false，“ errorCode”：-1007，“ errorMessage “：”關聯ID：e12d5a9e-b0d6-0000-745f-24b31dd971a6“} vendor.js？v = T82_qgC1tKr4vAoag-4pr9ch_dUDSit3nEgaqP4H0Ec：12090錯誤

錯誤：未捕獲（承諾中）：在resolvePromise中未定義 （vendor.js？v = T82_qgC1tKr4vAoag-4pr9ch_dUDSit3nEgaqP4H0Ec：87020

）

Answer 1

我們可以使用jQuery上傳文件，這是一個演示供您參考：

HTML：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<input id="getFile" type="file"/><br />
<input id="displayName" type="text" value="Enter a unique name" /><br />
<input id="addFileButton" type="button" value="Upload" onclick="uploadFile()"/>

JS代碼：

'use strict';

jQuery(document).ready(function () {

   // Check for FileReader API (HTML5) support.
   if (!window.FileReader) {
       alert('This browser does not support the FileReader API.');
   }
});

// Upload the file.
// You can upload files up to 2 GB with the REST API.
function uploadFile() {

// Define the folder path for this example.
var serverRelativeUrlToFolder = '/shared documents';

// Get test values from the file input and text input page controls.
var fileInput = jQuery('#getFile');
var newName = jQuery('#displayName').val();

// Get the server URL.
var serverUrl = _spPageContextInfo.webAbsoluteUrl;

// Initiate method calls using jQuery promises.
// Get the local file as an array buffer.
var getFile = getFileBuffer();
getFile.done(function (arrayBuffer) {

    // Add the file to the SharePoint folder.
    var addFile = addFileToFolder(arrayBuffer);
    addFile.done(function (file, status, xhr) {

        // Get the list item that corresponds to the uploaded file.
        var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri);
        getItem.done(function (listItem, status, xhr) {

            // Change the display name and title of the list item.
            var changeItem = updateListItem(listItem.d.__metadata);
            changeItem.done(function (data, status, xhr) {
                alert('file uploaded and updated');
            });
            changeItem.fail(onError);
        });
        getItem.fail(onError);
    });
    addFile.fail(onError);
});
getFile.fail(onError);

// Get the local file as an array buffer.
function getFileBuffer() {
    var deferred = jQuery.Deferred();
    var reader = new FileReader();
    reader.onloadend = function (e) {
        deferred.resolve(e.target.result);
    }
    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }
    reader.readAsArrayBuffer(fileInput[0].files[0]);
    return deferred.promise();
}

// Add the file to the file collection in the Shared Documents folder.
function addFileToFolder(arrayBuffer) {

    // Get the file name from the file input control on the page.
    var parts = fileInput[0].value.split('\\');
    var fileName = parts[parts.length - 1];

    // Construct the endpoint.
    var fileCollectionEndpoint = String.format(
            "{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" +
            "/add(overwrite=true, url='{2}')",
            serverUrl, serverRelativeUrlToFolder, fileName);

    // Send the request and return the response.
    // This call returns the SharePoint file.
    return jQuery.ajax({
        url: fileCollectionEndpoint,
        type: "POST",
        data: arrayBuffer,
        processData: false,
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
            "content-length": arrayBuffer.byteLength
        }
    });
}

// Get the list item that corresponds to the file by calling the file's ListItemAllFields property.
function getListItem(fileListItemUri) {

    // Send the request and return the response.
    return jQuery.ajax({
        url: fileListItemUri,
        type: "GET",
        headers: { "accept": "application/json;odata=verbose" }
    });
}

// Change the display name and title of the list item.
function updateListItem(itemMetadata) {

    // Define the list item changes. Use the FileLeafRef property to change the display name. 
    // For simplicity, also use the name as the title. 
    // The example gets the list item type from the item's metadata, but you can also get it from the
    // ListItemEntityTypeFullName property of the list.
    var body = String.format("{{'__metadata':{{'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}",
        itemMetadata.type, newName, newName);

    // Send the request and return the promise.
    // This call does not return response content from the server.
    return jQuery.ajax({
        url: itemMetadata.uri,
        type: "POST",
        data: body,
        headers: {
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
            "content-type": "application/json;odata=verbose",
            "content-length": body.length,
            "IF-MATCH": itemMetadata.etag,
            "X-HTTP-Method": "MERGE"
        }
    });
 }
}

// Display error messages. 
function onError(error) {
    alert(error.responseText);
}