javascript - SharePoint Online REST - 通过 JavaScript/AJAX 上传图片

Question

我正在尝试使用 native JavaScript/jQuery(而非 SP.RequestExecutor)将图像上传到 SharePoint。

我已经解决了身份验证问题，非常简单，所以现在只需要解决如何上传二进制文件的问题。如果我将纯文本放入文件中，它可以正常上传，但我遇到问题的只是二进制数据。

到目前为止，我的代码包含在下面。 getToken() 完成了这件事，并给我留下了一个有效的摘要对象供我使用。另请注意，我用 * 删除了文档库名称。

function PerformUpload(fileName, fileData) {    
    getToken();
    $.ajax({
        url: siteFullUrl +
        "/_api/web/GetFolderByServerRelativeUrl('/*****/')/Files" +
        "/Add(url='" + fileName + "', overwrite=true)",
        type: "POST",
        async: false,
        data: fileData,
        processData: false,
        contentType: "application/json;odata=verbose",
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": digest
        },
        success: function (data) {
            alert("Success");
        },
        error: function (err) {
            alert("Error: \r\n" + JSON.stringify(err));
        }
    });
}

我已经为 contentType 尝试了多种不同值的组合，设置为 binaryStringRequestBody: true，但图像在进入 SharePoint 时仍然损坏。

我目前将文件解析为二进制文件的代码是

var reader = new FileReader();
reader.onload = function (result) {
    var fileName = '',
     libraryName = '',
     fileData = '';

    var byteArray = new Uint8Array(result.target.result)
    for (var i = 0; i < byteArray.byteLength; i++) {
        fileData += String.fromCharCode(byteArray[i])
    }
    PerformUpload("image.jpg", fileData);
};
reader.readAsArrayBuffer(fileInput);

文件正在上传到 SharePoint，但如果我尝试查看或下载它，它已损坏。

任何人都可以提供有关将二进制文件上传到 SharePoint 的正确方法的任何指导吗？我应该提到的是，如果我将(在 ajax 调用中)data: fileData, 替换为 data: "A simple string", 文件上传，当我下载它的内容时文件的一个简单的字符串。

Answer 1

如果您使用 SP.RequestExecutor 将文件上传到 SharePoint，则必须将 ArrayBuffer 转换为一个字符串，然后可以将该字符串设置为 POST 操作的主体。 See details here它指导您如何通过 SP.RequestExecutor 使用 REST 将文件上传到 SharePoint。

如果您使用 Jquery.Ajax 将已解析的文件转换为二进制文件，则图像在进入 SharePoint 时会损坏。另请注意，FileReader 对象接受异步加载的文件信息。 onload 和 onerror 事件在文件加载成功或失败时触发。我们应该保持默认onload事件的过程，并在onloadend事件中获取结果。

我尝试了以下文章并且有效:

How to: Upload a file by using the REST API and jQuery

为了简单起见，我是这样实现的:

var fileInput = jQuery('#getFile');
var file = fileInput[0].files[0];
var serverRelativeUrlToFolder = '*****'; //if the library in subsite, You have to remove the forward slash "/" before the document library relative url. 
proccessUploadUsingJQueryAjax(file, serverRelativeUrlToFolder);

function getFileBuffer(file) {
     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(file);
     return deferred.promise();
}
function addFileToFolderUsingJQueryAjax(fileName, arrayBuffer, serverRelativeUrlToFolder) {
       // Construct the endpoint.
        var fileCollectionEndpoint = String.format(
                "{0}/_api/web/GetFolderByServerRelativeUrl('{1}')/files/add(overwrite=true, url='{2}')",
                _spPageContextInfo.webAbsoluteUrl, 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,
            contentType: "application/json;odata=verbose",
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
            }
        });
    }
function proccessUploadUsingJQueryAjax(file, serverRelativeUrlToFolder){
     var getFile = getFileBuffer(file);
     getFile.done(function (arrayBuffer) {
     // Add the file to the SharePoint folder.
            var addFile = addFileToFolderUsingJQueryAjax("image.jpg", arrayBuffer, serverRelativeUrlToFolder);
            addFile.done(function (file, status, xhr) {
                alert("File Uploaded");
            });
            addFile.fail(function (error) { alert("Error Add File: " + error.responseText); });
        });
     getFile.fail(function (error) { alert("Error Get File: " + error.responseText); });
}

如果它解决了您的问题，请告诉我。