Как загрузить изображение с помощью Strapi.io и AngularJS? - PullRequest
Новая
       13

Как загрузить изображение с помощью Strapi.io и AngularJS?

0 голосов
/ 01 декабря 2018

У меня есть тип http.post, который должен быть через Curl, введите этот пример: 

curl -X POST -F 'files=@/path/to/pictures/avatar.jpg&refId=5a993616b8e66660e8baf45c&ref=user&source=users-permissions&field=avatar' http://localhost:1337/upload

Как видите, отправка изображения в определенное поле.Этот завиток представлен этим JSON: 

{
  "files": "...", // Buffer or stream of file(s)
  "path": "user/avatar", // Uploading folder of file(s).
  "refId": "5a993616b8e66660e8baf45c", // User's Id.
  "ref": "user", // Model name.
  "source": "users-permissions", // Plugin name.
  "field": "avatar" // Field name in the User model.
}

Как эта документация: https://strapi.io/documentation/3.x.x/guides/upload.html#examples

Что ж, делаем это так в Angular:

Создание ввода вhtml моего компонента: 

<input type="file" name="file" (change)="onFileSelected($event)">

Создание вашего мероприятия: 

onFileSelected(event) {
    console.log(event);
}

У меня есть несколько результатов, среди которых файл с: 

files: FileList
0: File(58456)
lastModified: 1542844204930
lastModifiedDate: Wed Nov 21 2018 21:50:04 GMT-0200 (Horário de Verão de Brasília) {}
name: "8.jpg"
size: 58456
type: "image/jpeg"
webkitRelativePath: ""

Хорошо, но сделайтелюбые тесты, использующие Postman, чтобы лучше понять, кто я могу это сделать, верните мне «true», но в моей базе данных ничего не происходит:

enter image description here

Как я могуиспользовать скручиваемость, показанную в начале, с помощью метода Post-Angled или даже Postman (у которого было бы более ясное представление), поскольку у меня уже есть все данные, которые мне нужны?

1 Ответ

0 голосов
/ 10 декабря 2018

Вот как это сделать с jQuery, вам просто нужно адаптировать его с Angular.

Вам также нужно будет добавить свои атрибуты ref, чтобы установить связь с вашим пользователем. 

<form method="post">
    <input type="file" name="files" id="files">
    <input type="submit" name="" value="Submit">
  </form>

  <script type="text/javascript">
    $('form').on('submit', function (e) {
      e.preventDefault();

      var data = new FormData();
      $.each($('#files')[0].files, function(i, file) {
        data.append('files', file);
      });

      $.ajax({
        url: '/upload',
        data: data,
        contentType: false,
        processData: false,
        method: 'POST',
        success: function(data){
          alert(data);
        }
      });
    });
  </script>
...