Добавить файл изображения для формирования данных - Cordova/Angular

Я использую Anuglar, Ionic и Cordova в моем текущем проекте, и я пытаюсь POST FormData, содержащий файл изображения на моем сервере. Прямо сейчас я использую плагин камеры cordova, чтобы вернуть путь к изображению на устройстве (например: файл://путь/в/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, поэтому любая помощь будет оценена

Ответ 1

После того, как я возился, мне удалось найти довольно простое решение. Сначала я добавил плагин cordova file, затем я использую код ниже

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, а затем добавьте его в данные формы. Надеюсь, это поможет кому-то еще найти простой способ сделать это.

Ответ 2

Вам нужно отправить содержимое файла. С HTML5 FileAPI вам нужно создать объект FileReader.

Некоторое время назад я разработал приложение с кордорой, и мне пришлось читать некоторые файлы, и я создал библиотеку под названием 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);

Извини, мой плохой английский.

Ответ 3

Ваш пост был чрезвычайно полезен для решения моей проблемы. Я использую 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();
});