Javascript 使用AngularJS将正确编码的（base64？）图像上载到SharePoint

我可以将图像文件上载到SharePoint，但未将其识别为图像。根据研究，我尝试使用以下指令，该指令规定图像在上载到SharePoint时需要进行base64编码，但它仍然上载了一个似乎已损坏的文件：

我很乐意使用此指令，但不确定如何将所需内容传递到SharePoint的REST API中

我最初的迭代没有使用这个指令，但更多的是直接的上传尝试

我需要达到的目标如下：

1） 成功上载图像而不“损坏”，这是否需要base64编码/如何实现

2） 按图片名称（而不是“test.jpg”）上传图片，并提供一些元数据（例如，上传带有标题或部门名称的图片）

第1次迭代：无指令 这是我的HTML（请注意，控制器通过ng路由绑定到页面）：

更新：我认为这个问题与我在SharePoint上发布的$http帖子无关。使用上面提到的指令，我可以输出base64，但不确定如何将其传递到我的帖子中进行上传

迭代2：使用指令 以下是我当前使用指令的HTML：

<form>
<input type="file" data-ng-model="files" base-sixty-four-input>
<button data-ng-click="upload()">Submit</button>
</form>

更新2:使用SP.RequestExecutor如下创建相同的结果。文件上载但不呈现。图像和文档会发生这种情况：

迭代3：使用指令和SP.RequestExecutor

$scope.upload = function () {
    var dataURL = 'data:' + $scope.files.filetype + ';' + 'base64,' + $scope.files.base64;
    var createitem = new SP.RequestExecutor("/sites/asite");
    createitem.executeAsync({
        url: "/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='" + $scope.files.filename + "')",
        method: "POST",
        binaryStringRequestBody: true,
        body: dataURL,
        success: fsucc,
        error: ferr,
        state: "Update"
    });

    function fsucc(data) {
        alert('success');
    }
    function ferr(data) {
        alert('error\n\n' + data.statusText + "\n\n" + data.responseText);
    }
}

更新3:使用.ajax如下，它将成功发布图像，但使用$http时，它会破坏图像

迭代3：使用.Ajax（works）

迭代4：使用$http（破坏图像）

---

是的，您必须进行base64编码

接下来，您的

文件更改

将用于base64编码：

$scope.filesChanged = function (input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {

            //Sets the Old Image to new New Image
            $('#photo-id').attr('src', e.target.result);

            //Create a canvas and draw image on Client Side to get the byte[] equivalent
            var canvas = document.createElement("canvas");
            var imageElement = document.createElement("img");

            imageElement.setAttribute('src', e.target.result);
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            var context = canvas.getContext("2d");
            context.drawImage(imageElement, 0, 0);
            var base64Image = canvas.toDataURL("image/jpeg");

            //Removes the Data Type Prefix 
            //And set the view model to the new value
            $scope.data.Photo = base64Image.replace(/data:image\/jpeg;base64,/g, '');
        }

        //Renders Image on Page
        reader.readAsDataURL(input.files[0]);
    }
};

我给您的建议是将ng模型从$scope.files更改为$scope.data.Photo，并在输入标记中添加一个id。（在本例中id=“照片上传”）

因此，用于上载的HTML将如下所示：

<input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="data.Photo" id="photo-upload" multiple>

对于您上传的pic，您可以使用：

<img ng-src="data:image/jpeg;base64,{{data.Photo}}" id="photo-id"/>

我只是不确定是否需要多次上传，但对于单次上传来说，它对我来说非常有用

希望这将帮助您解决SharePoint的问题

---

祝你好运

没有这样的运气。由于此行出现“无法设置未定义或空引用的属性”Photo:$scope.data.Photo=base64Image.replace（/data:image\/jpeg；base64，/g'）；在控制器的顶部，尝试将$scope.data初始化为object:$scope.data={}问题似乎在于我发布的数据。你能看看我的上传功能，看看为什么它没有传递正确的数据/我发布base64的具体方式吗？不幸的是，我不熟悉sharepoint，但我想知道为什么“内容类型”在你的标题中为false？您必须设置您正在处理的数据类型…我是通过另一个帖子来实现这一点的，因为这将让SharePoint了解这一点。除了我的头，上传函数看起来正确吗/我需要在某个地方指定base64字符串吗？

function uploadFileSync(spWebUrl , library, filename, file) 
    {
        var reader = new FileReader();
        reader.onloadend = function(evt) 
        {
            if (evt.target.readyState == FileReader.DONE) 
            {
                var buffer = evt.target.result;
                var completeUrl = spWebUrl
                  + "/_api/web/lists/getByTitle('"+ library +"')"
                  + "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?"
                  + "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'";

                $.ajax({
                    url: completeUrl,
                    type: "POST",
                    data: buffer,
                    async: false,
                    processData: false,
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                        "content-length": buffer.byteLength
                    },
                    complete: function (data) {
                        //uploaded pic url
                        console.log(data.responseJSON.d.ServerRelativeUrl);
                        $route.reload();
                    },
                    error: function (err) {
                        alert('failed');
                    }
                });

            }
        };
        reader.readAsArrayBuffer(file);
    }  

function uploadFileSync(spWebUrl , library, filename, file) 
{
    var reader = new FileReader();
    reader.onloadend = function (evt) {
        if (evt.target.readyState == FileReader.DONE) {
            var buffer = evt.target.result;
            var completeUrl = spWebUrl
              + "/_api/web/lists/getByTitle('" + library + "')"
              + "/RootFolder/Files/add(url='" + filename + "',overwrite='true')?"
              + "@TargetLibrary='" + library + "'&@TargetFileName='" + filename + "'";

            $http({
                url: completeUrl,
                method: "POST",
                data: buffer,
                processData: false,
                headers: {
                    "accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                    "content-length": buffer.byteLength
                }
            }).success(function (data) {
                //uploaded pic url
                //console.log(data.responseJSON.d.ServerRelativeUrl);
                $route.reload();
            }).error(function (err) {
                alert(err);
            });
        }
    };
    reader.readAsArrayBuffer(file);
}

$scope.filesChanged = function (input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {

            //Sets the Old Image to new New Image
            $('#photo-id').attr('src', e.target.result);

            //Create a canvas and draw image on Client Side to get the byte[] equivalent
            var canvas = document.createElement("canvas");
            var imageElement = document.createElement("img");

            imageElement.setAttribute('src', e.target.result);
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            var context = canvas.getContext("2d");
            context.drawImage(imageElement, 0, 0);
            var base64Image = canvas.toDataURL("image/jpeg");

            //Removes the Data Type Prefix 
            //And set the view model to the new value
            $scope.data.Photo = base64Image.replace(/data:image\/jpeg;base64,/g, '');
        }

        //Renders Image on Page
        reader.readAsDataURL(input.files[0]);
    }
};

<input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="data.Photo" id="photo-upload" multiple>

<img ng-src="data:image/jpeg;base64,{{data.Photo}}" id="photo-id"/>