cosmic数据库使用说明_如何使用Cosmic JS API将媒体上传到存储桶

cosmic数据库使用说明

Tony Spiro是Cosmic JS的共同创始人， Cosmic JS是API最早的内容管理平台，用于构建基于内容的应用程序。

在这个简短的教程中，我将向您展示如何：

1. 通过Cosmic JS API将图像上传到您的Cosmic JS存储桶。
2. 使用功能强大的Imgix处理服务更改图像（每个Cosmic JS Bucket免费提供）
3. 将上传的图像作为元字段添加到存储桶中的对象

入门

注册Cosmic JS来创建您自己的Bucket，或者仅遵循示例。

首先，让我们创建一个简单HTML表单来上传我们的媒体。

< html >
  < body >
    < form action = "https://api.cosmicjs.com/v1/bucket-slug/media" method = "post" enctype = "multipart/form-data" >
      < input type = "file" name = "media" />
      < input type = "submit" value = "Upload!" />
    </ form >   
  </ body >
</ html >

接下来，让我们添加一个文件并使其撕裂。 注意，我们现在有数据可用于数据获取/存储：

{"media" : {
    "name" : "57319310-b914-11e6-acef-b1b7e94fa195-earth.png" ,
    "original_name" : "earth.png" ,
    "size" : 1024912 ,
    "type" : "image/png" ,
    "bucket" : "5839c67f0d3201c114000004" ,
    "created" : "2016-12-03T04:52:49.516Z" ,
    "location" : "https://cosmicjs.com/uploads" ,
    "url" : "https://cosmicjs.com/uploads/57319310-b914-11e6-acef-b1b7e94fa195-earth.png" ,
    "imgix_url" : "https://cosmicjs.imgix.net/57319310-b914-11e6-acef-b1b7e94fa195-earth.png" ,
  }
}

Imgix的力量

将媒体发布到Cosmic JS Bucket后，返回的数据之一是Imgix URL。 Imgix为我们提供了强大的动态图像处理能力。 只需在Imgix网址的末尾添加查询参数，我们就可以调整大小，裁剪，添加过滤器等到上传的图像中。 例如，要将图像调整为移动设备大小的2倍，只需在URL末尾添加“ ?w=640 ”：

https://cosmicjs.imgix.net/57319310-b914-11e6-acef-b1b7e94fa195-earth.png?w=640

这使创建轻量级响应式网站变得更加容易，因为现在我们不必为不同的设备上传多个图像。 现在，我们要做的就是对URL进行编程，以提供所需的大小。 浏览Imgix文档以轻松掌握所有功能。 每个Cosmic JS帐户都免费包含Imgix。

将上传的图像添加到对象

将图片添加到Cosmic JS Bucket后，我们可能需要将其添加到对象。 为此，我们将简单地获取POST媒体后返回的“名称”值，并将其添加为文件Metafield值，并将其发布到我们的Add Object API端点：

POST /v1/:your-bucket-slug/add-object

{"title" : "New Object" ,
  "slug" : "new-object" ,
  "type_slug" : "tests" ,
  "content" : "" ,
  "metafields" : [{
    "type" : "file" ,
    "title" : "Image" ,
    "key" : "image" ,
    "value" : "57319310-b914-11e6-acef-b1b7e94fa195-earth.png"
  }]
}

现在，当我们进入Cosmic JS Bucket时，我们会注意到“测试”对象类型具有一个名为“新对象”的新对象，并且新上传的文件作为文件元字段。

结论

Cosmic JS使得将动态内容添加到任何网站或应用程序变得非常容易。 在本教程中，我向您展示了如何使用Cosmic JS API添加媒体，使用可用的Imgix处理URL处理图像，然后将该图像保存到我们的存储桶中的对象中，以便以后进行编辑。 要了解有关Cosmic JS如何使您的网站和应用程序轻松存储媒体和功能内容的更多信息，请查看文档页面 。

我希望您喜欢本教程。 如果您有任何疑问或想了解更多有关Cosmic JS如何帮助您更快，更轻松地构建基于内容的应用程序的信息，请在Slack上加入Cosmic JS，并在Twitter上与我们联系 。

翻译自: https://hackernoon.com/how-to-upload-media-to-your-bucket-using-the-cosmic-js-api-57f0abfca6c0

cosmic数据库使用说明