7

私はngFileUpload を機能させて、画像をアップロードして DB に送信できるようにしようとしています。私の場合は、次のような構文で編集できる JSON オブジェクトを受け入れるmongoLab DB です。POST

$http.post('myMongoName/myDb/myCollection/myTable', {'key': 'value'})

かなり単純です。ngFileUploadただし、 DBを使用してアップロードされた画像を送信する方法について混乱しています。ngFileUpload のドキュメント ページで紹介されているおなじみの構文を使用しています。

$scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                console.log(file);
             Upload.upload({
                url: myMongoLabURL,
                fields: {'sup': 'sup'},
                file: file
                })
             }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                });
            }
        }
 }

しかし、fileオブジェクトをログアウトすると、次のオブジェクトが得られます。

File {}
$$hashKey: "object:76"
lastModified: 1433922719000
lastModifiedDate: Wed Jun 10 2015 00:51:59 GMT-0700 (PDT)
name: "1.png"
size: 138024
type: "image/png"
webkitRelativePath: ""
__proto__: File

DBに保存できる実際の画像バイナリを含むものはありません。私は基本的に、実際の画像自体が実際にどこにアップロードされているのかわかりません!

この構文ではサーバーからの応答が得られないことに注意することも重要です。ただし、画像のバイナリを取得できれば、おなじみの$http.post方法を使用して、自分で画像を DB にプッシュできます。

アップロードされた画像のバイナリを見つけて、DB にプッシュするにはどうすればよいですか? アップロードされた後、画像はどこに存在し、どこにアップロードされているのでしょうか? 私はこれをすべて行っているlocalhostので、ブラウザは画像のすべてのプロパティを読み取ったようですが、これを意味のある洞察に変換して、画像を外部 DB に保存するために使用できる方法がわかりません。

助けてくれてありがとう。

4

1 に答える 1

3

FileReader APIを使用することになりました。最も具体的には、URI をblob. カスタムディレクティブで次のようなものを実装しました。attrs同じページの独立したスコープでディレクティブを複数回使用できるように、多くの読み取りを含めることになりましたが、ここでは省略します。参考になれば、ディレクティブ全体を提供できますが、簡単に言うと、次のようになります。

function create_blob(file) {
    var deferred = $q.defer();
    var reader = new FileReader();
    reader.onload = function() {
            deferred.resolve(reader.result);
    };
    reader.readAsDataURL(file);
    return deferred.promise;
}
$scope.$watch('files', function() {
    $scope.upload($scope.files);
});
$scope.upload = function(files) {
    $scope.loading = true;
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var promise = create_blob(file);
            promise.then(function(result) {
                var thumb = resize(result);
                Upload.http({
                    url: '/path',
                    data: result
                })
                .progress(function (evt) {
                    console.log(evt);
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ');
               })
                .success(function (data, status,headers,config) {

...等。

私はそれがあなたのためにそれをするだろうと思います. blob画像をアップロードすると、画像の残りのメタデータは表示されますが、スコープ内のデータがまったく表示されないため、データの取得が混乱する可能性があります。このcreate_blob関数は、blob 形式で取得する必要があります。console.log(reader.readAsDataURL(file);その関数内で実行して、データを直接表示してみてください。

理解するのに長い時間がかかりました.これが最善の方法であるかどうかはわかりません.誰かがより良い方法を知っている場合は、お気軽に提案してください. :-)

于 2015-08-18T06:27:50.090 に答える