Подтвердить что ты не робот

Как кодировать <входной файл> в base64 в AngularJs?

Мне нужно сохранить изображение в Drupal через службу/файл drupal. Для чего я понимаю, мне нужно декодировать файл в base64 и отправить это как полезную нагрузку для службы/файла. Как я могу получить кодировку, чтобы сделать это???? Я хочу сделать это в javascript.

4b9b3361

ОТВЕТЫ

Ответ 1

Я являюсь автором angular-base64-upload, как упоминалось в @GrimurD. Эта директива отлично работает для этого сценария. Он анализирует изображение (или любые другие типы файлов) в base64-кодирование и присоединяет информацию о файле к модели в вашей области.

Использование образца:

<input type='file' ng-model='yourModel' base-sixty-four-input>

После того, как вы выбрали файл, yourModel будет иметь значение:

{
  "filetype": "text/plain",
  "filename": "textfile.txt",
  "base64": "/asdjfo4sa]f57as]fd42sdf354asdf2as35fd4"
}

Он также имеет пример кода для декодирования файла base64 на вашем сервере, используя PHP или ruby.

Ответ 2

Я бы рекомендовал вам использовать https://github.com/ninjatronic/angular-base64.

После выполнения инструкций по использованию этой библиотеки вы можете просто вызвать:

var imageData=$base64.encode(image);

Не забудьте ввести в свой модуль:

.module('myApp', ['base64'])

Ответ 3

Я знаю, что он довольно старый, но я пришел сюда для решения.

В конце концов я узнал, что (если вы не хотите использовать внешние библиотеки) загрузка изображения в базу 64 так же просто, как с помощью javascript FileReader.readAsDataURL()

Надеюсь, мой последний код поможет другим новичкам, таким как я. Он имеет:

  • Входной файл с HTML5 input type='file' (вдохновленный этим ответом)
  • Триггерный ввод из других элементов html (вдохновленный этим ответом)
  • Проверьте, поддерживает ли браузер input type='file' (вдохновленный этим ответом)

Он также находится на codepen

angular.module('starter', [])
  .controller('Ctrl', function($scope) {
    $scope.data = {}; //init variable
    $scope.click = function() { //default function, to be override if browser supports input type='file'
      $scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
    }

    var fileSelect = document.createElement('input'); //input it not displayed in html, I want to trigger it form other elements
    fileSelect.type = 'file';

    if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
      return;
    }

    $scope.click = function() { //activate function to begin input file on click
      fileSelect.click();
    }

    fileSelect.onchange = function() { //set callback to action after choosing file
      var f = fileSelect.files[0],
        r = new FileReader();

      r.onloadend = function(e) { //callback after files finish loading
        $scope.data.b64 = e.target.result;
        $scope.$apply();
        console.log($scope.data.b64.replace(/^data:image\/(png|jpg);base64,/, "")); //replace regex if you want to rip off the base 64 "header"

        //here you can send data over your server as desired
      }

      r.readAsDataURL(f); //once defined all callbacks, begin reading the file

    };


  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app='starter' ng-controller='Ctrl'>
  <button ng-click='click()'>click to select and get base64</button>
  <br>BASE 64 data:
  <br>
  <span style='color: red'>{{data.alert}}</span>
  <div style='word-wrap:break-word'>
    {{data.b64}}
  </div>
</body>