如何使用Strapi.io和AngularJS上传图像?

时间:2018-12-01 16:05:13

标签: node.js json angular6 postman strapi

我有一种必须通过Curl的http.post类型,请输入以下示例:

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方法甚至开始使用Post-Angled方法显示的开始处的卷曲?

1 个答案:

答案 0 :(得分:0)

这是使用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>