Question

我尝试使用原生JavaScript / jQuery将图像上传到SharePoint - 而不是SP.RequestExecutor。

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

到目前为止我的代码包含在下面。 getToken()做了它的事情并留给我一个有效的摘要对象使用。另请注意，我已使用*＆＃39}清空了文档库名称。

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: fileData,替换（在ajax调用上）data: "A simple string",文件上传，当我下载文件时，文件内容为A simple string。

Answer 1

如果使用SP.RequestExecutor将文件上载到SharePoint，则必须将ArrayBuffer转换为字符串，然后可以将其设置为POST操作的主体。 See details here，指导您如何使用REST通过SP.RequestExecutor将文件上传到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向您的文件添加元数据

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

2 个答案: