web-dev-qa-db-ja.com

画像データをフォームデータに追加する-Cordova / Angular

現在のプロジェクトでAnuglar、Ionic、およびCordovaを使用していますが、サーバーに画像ファイルを含むPOST FormDataを使用しようとしています。現在、私は cordova camera plugin を使用して、デバイス上の画像へのファイルパスを返しています（例：file：// path/to/img）。ファイルパスを取得したら、画像ファイルパスを使用してFormDataオブジェクトに画像ファイルを追加します。ここに私のコードがあります。

var fd = new FormData();

fd.append('attachment', file);
fd.append('uuid', uuid);
fd.append('userRoleId', userRole);

上記のコードは、<input type='file'>から取得したファイルを追加するときに機能しますが、デバイス上のファイルパスを指定しただけでは機能しません。

基本的に、FormDataは現在このように表示されています。

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; 

file://path/to/img

そして、私はそれがこのように見えることを望みます

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; filename="jesus-quintana.jpg"
Content-Type: image/jpeg

Cordova FileTransferを使用して画像をアップロードし、画像をbase64に変換してからアップロードするさまざまな方法を見つけました。しかし、パスを使用してフォーム内に投稿するだけでファイルを取得する簡単な方法は見つかりませんでした。 File Api にあまり詳しくないので、どんな助けでも歓迎します

javascriptandroidangularjscordovaionic-framework
20
Joe Komputer

いじくり回した後、私はかなり簡単な解決策を見つけ出すことができました。最初に cordova file plugin を追加し、次に以下のコードを使用します

var fd = new FormData();
     window.resolveLocalFileSystemURL(attachment.img, function(fileEntry) {
         fileEntry.file(function(file) {
             var reader = new FileReader();
                 reader.onloadend = function(e) {
                      var imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                      fd.append('attachment', imgBlob);
                      fd.append('uuid', attachment.uuid);
                      fd.append('userRoleId', 12345);
                      console.log(fd);
                      //post form call here
                 };
                 reader.readAsArrayBuffer(file);

         }, function(e){$scope.errorHandler(e)});
    }, function(e){$scope.errorHandler(e)});

したがって、フォームを作成し、FileReaderを使用してArrayBufferをBlobオブジェクトに挿入し、それをフォームデータに追加しています。うまくいけば、これが簡単な方法を探している他の誰かの助けになります。

39
Joe Komputer

ファイルコンテンツを送信する必要があります。 HTML5 FileAPIでは、 FileReader オブジェクトを作成する必要があります。

少し前に、私はCordovaを使用してアプリケーションを開発し、いくつかのファイルを読み取る必要があり、 CoFS （最初にCordova FileSystemによるものですが、一部のブラウザーで機能しています）というライブラリーを作成しました。

それはベータ状態ですが、私はそれを使用し、うまく動作します。次のようなことができます：

var errHandler = function (err) {
   console.log("Error getting picture.", err);
};

var sendPicture = function (file) {

    var fs = new CoFS();

    fs.readFile(file, function (err, data) {

        if (err) {
            return errHandler(err);
        }

        var fd = new FormData();

        fd.append('attachment', new Blob(data));
        fd.append('uuid', uuid);
        fd.append('userRoleId', userRole);

        console.log("Data of file:" + data.toString('base64'));
        // Send fd...

    });

};

navigator.camera.getPicture(sendPicture, errHandler);

かわいそうな英語がすみません。

6
Exos

あなたの投稿は私の問題を解決するのに非常に役立ちました。 Ionic 4を使用し、標準のHTTPおよびファイルクライアントを使用して画像をアップロードしようとしています。参照用のキーコードは次のとおりです。

return this.file.readAsArrayBuffer(path, file).
  then(blob => {
    const imgBlob = new Blob([blob], { type: 'image/jpeg' } );

    formData.append('image[file]', imgBlob);

    return this.http.post(url, formData, headers).subscribe();
});

それが私のためにしたように、それがそこにいる誰かを助けることを願っています。

0
user11794