web-dev-qa-db-ja.com

適切にエンコードされた（base64？）イメージをAngularJSを使用してSharePointにアップロードします

画像ファイルをSharePointにアップロードできますが、画像として認識されません。 SharePointにアップロードするときに画像をbase64でエンコードする必要があるという調査に基づいて、次のディレクティブを利用しようとしましたが、破損しているように見えるファイルをアップロードします： https://github.com/ adonespitogo/angular-base64-upload

このディレクティブを使用できてうれしいですが、必要なものをSharePointのREST APIに渡す方法がわかりません。

私が持っていた最初の反復はこのディレクティブを使用していませんが、より直接的なアップロードの試みです。

私が達成する必要があるのは次のとおりです。

1）「破損」することなく画像を正常にアップロードします。これにはbase64エンコードが必要ですか/これを実現するにはどうすればよいですか？

2）画像を（「test.jpg」ではなく）名前でアップロードし、メタデータをいくつか含めます（たとえば、画像が属するタイトルまたは部門名で画像をアップロードします）

反復1：ディレクティブなしこれが私のHTMLです（コントローラーはng-routeを介してページに関連付けられていることに注意してください）：

 <div class="col-md-12">
        <form>
            <input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="files" multiple>
            <button data-ng-click="upload()">Submit</button>
            <li data-ng-repeat="file in files">{{file.name}}</li>
        </form>            
    </div>

これが私のコントローラーです：

$scope.filesChanged = function (Elm) {
        $scope.files = Elm.files
        $scope.$apply();
    }
    $scope.upload = function () {
        var fd = new FormData()
        angular.forEach($scope.files,function(file){
            fd.append('file',file)
        })
            $http.post("/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='test.jpg',overwrite='true')", fd,
                    {
                        transformRequest: angular.identity,
                        headers: {
                            'Content-Type':undefined, 'X-RequestDigest': $("#__REQUESTDIGEST").val()}
                }).success(function (d) {
                    console.log(d);
                });
            }

UPDATE：この問題はSharePointへの$ http投稿に限定されていると思います。上記のディレクティブを使用して、base64を出力できますが、アップロードのためにこれを投稿に渡す方法がわかりません。

反復2：ディレクティブの使用これが https://github.com/adonespitogo/angular-base64を使用した現在のHTMLです-upload ディレクティブ：

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

破損したイメージファイルをSharePointに投稿しているコントローラー：

$scope.upload = function () {
        console.log($scope.files); // Output result from upload directive
        $http({
            method: 'POST',
            url: "/sites/ens/_api/web/lists/getByTitle('Report Images')/RootFolder/Files/add(url='" + $scope.files.filename +"',overwrite='true')", 
            headers: {
                'Content-Type': false ,
                'X-RequestDigest': $("#__REQUESTDIGEST").val()
            },
            data: $scope.files,
         }).success(function (data) {
            console.log(data);
        });
    }

更新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の使用（動作）

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);
    }

反復4：$ httpの使用（画像の破損）

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);
}
javascriptangularjsimagesharepointsharepoint-2013
19
Kode

はい、base64エンコーディングを行う必要があります。

これに続いて article 、あなたのfilesChangedは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-modelを$ scope.filesから$ scope.data.Photoから-に変更することをお勧めします。 スコープの問題を回避する そして入力タグにidを追加します。 （この場合、id = "photo-upload"）

したがって、アップロード用のHTMLは次のようになります。

<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"/>

複数のアップロードについてはよくわかりませんが、単一のアップロードの場合はうまく機能します。

これがSharePointの問題の解決に役立つことを願っています。

幸運を！

7
arman1991