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

Question

我正在尝试使用本机 JavaScript/jQuery 将图像上传到 SharePoint - 而不是 SP.RequestExecutor。

我已经破解了身份验证问题，很简单，所以现在只是研究如何上传二进制文件的一个案例。如果我在文件中放入纯文本，它可以很好地上传，这只是我遇到问题的二进制数据。

到目前为止，我的代码包含在下面。 getToken() 做到了，让我有一个有效的摘要对象可供使用。另请注意，我已使用 *'s 删除了文档库名称。

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 的正确方法提供任何指导吗？我应该提一下，如果我用data: "A simple string", 替换（在ajax 调用上）data: fileData,，文件就会上传，当我下载它时，文件的内容是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); });
}

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

Answer 2

尝试将此添加到您的 ajax 设置中

transformRequest: []

这将阻止 Sharepoint 将元数据添加到您的文件中