---
title: APIで画像を登録できますか？
description: → 登録することが可能です。
---

[コンテンツまでスキップ](https://help.microcms.io/ja/knowledge/add-image-api#main-content)

[![logo.png\]](https://help.microcms.io/hs-fs/hubfs/logo.png?width=150&height=34&name=logo.png)](https://microcms.io/)

メインナビゲーションを開く

メインナビゲーションを閉じる

 キーワードから探す

- 検索フィールドが空なので、候補はありません。

1. [ヘルプ](https://help.microcms.io/ja/knowledge?hsLang=ja)
2. [機能](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja)
3. [メディア（画像/ファイル）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E7%94%BB%E5%83%8F-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)

# APIで画像を登録できますか？

## → 登録することが可能です。

### 登録方法

以下の2つのステップにて、登録を行います。

#### 1. 画像をサービスにアップロードする

マネジメントAPIを利用することで、画像をmicroCMSのサービスに登録することが可能です。

▼ POST /api/v1/media  
[https://document.microcms.io/management-api/post-media](https://document.microcms.io/management-api/post-media)

#### 2. 画像をコンテンツのフィールドにセットする

コンテンツAPIを利用することで、画像をmicroCMSのコンテンツにセットすることが可能です。

新規にコンテンツ自体を作成する方法と、既存のコンテンツのフィールドへにセットする方法の両方に対応しています。

- 新規作成の場合

▼ POST /api/v1/media  
[https://document.microcms.io/content-api/post-content](https://document.microcms.io/content-api/post-content)

▼ PUT /api/v1/media  
[https://document.microcms.io/content-api/put-content](https://document.microcms.io/content-api/put-content)

- 既存のコンテンツへの登録の場合

▼ PATCH /api/v1/media  
[https://document.microcms.io/content-api/patch-content](https://document.microcms.io/content-api/patch-content)

### 実装例

例として、1つの画像フィールドのみを持つAPIに、画像を登録した状態でコンテンツを作成する手順をご紹介します。

### ![](https://help.microcms.io/hs-fs/hubfs/CleanShot%202024-03-01%20at%205%E2%80%AF-30-00@2x-png.png?width=688&height=341&name=CleanShot%202024-03-01%20at%205%E2%80%AF-30-00@2x-png.png)

Node.js 18による、一連の処理のサンプルコードを示します。  
（複数のライブラリにおける実装方法を記載しております。ご利用いただきやすい方式をご参照ください。）

▼ microcms-js-sdkでの実装例

```
const fs = require('fs')const Stream = require('stream')const { createManagementClient, createClient } = require('microcms-js-sdk')// 実際のサービスIDに置き換えてくださいconst serviceDomain = 'YOUR_DOMAIN'// 実際のAPIキーに置き換えてくださいconst apiKey = 'YOUR_API_KEY'const client = createClient({  serviceDomain: serviceDomain,  apiKey: apiKey,})const managementClient = createManagementClient({  serviceDomain: serviceDomain,  apiKey: apiKey,})const file = fs.readFileSync('blog-template.png')const main = async (file) => {   // 1. 画像をサービスにアップロードする  const { url } = await managementClient.uploadMedia({    data: new Blob([file], { type: 'image/png' }),    name: 'blog-template.png',  })  console.log('画像URL', url)   // 2. 画像をコンテンツのフィールドにセットする  const res = await client.create({    endpoint: 'image-upload',    content: {      image: url,    },  })  console.log('コンテンツID', res.id)}main(file)
```

▼ axiosでの実装例

```
const fs = require('fs')const FormData = require('form-data')const axios = require('axios')// 実際のサービスIDに置き換えてくださいconst serviceDomain = 'YOUR_DOMAIN'// 実際のAPIキーに置き換えてくださいconst apiKey = 'YOUR_API_KEY'const file = fs.createReadStream('blog-template.png')// 1. 画像をサービスにアップロードするconst uploadImage = async (file) => {   const managementApiUrl = `https://${serviceDomain}.microcms-management.io/api/v1/media`  const form = new FormData()  form.append('file', file)  const config = {    headers: {      'X-MICROCMS-API-KEY': apiKey,      ...form.getHeaders(),    },  }  try {     const res = await axios.post(managementApiUrl, form, config)    console.log('画像URL', res.data.url)    return res.data.url  } catch (error) {    console.error('Error uploading image:', error)  }}// 2. 画像をコンテンツのフィールドにセットするconst setImageToField = async (imageUrl) => {  const contentsApiUrl = `https://${serviceDomain}.microcms.io/api/v1/image-upload`  const body = { image: imageUrl }  const config = {    headers: {      'X-MICROCMS-API-KEY': apiKey,    },  }  try {    const res = await axios.post(contentsApiUrl, body, config)    console.log('コンテンツID', res.data)  } catch (error) {    console.error('Error setting image:', error)  }}const main = async (file) => {  const imageUrl = await uploadImage(file)  setImageToField(imageUrl)}main(file)
```

正常に処理が終了すると、画像がセットされた状態でコンテンツが登録されていることが、管理画面より確認できます。

![](https://help.microcms.io/hs-fs/hubfs/CleanShot%202024-03-05%20at%202%E2%80%AF-38-35@2x-png.png?width=688&height=271&name=CleanShot%202024-03-05%20at%202%E2%80%AF-38-35@2x-png.png)

 

- [アカウント](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#main-content)

    - [ログイン](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3)
    - [登録／変更／削除](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E7%99%BB%E9%8C%B2%E5%A4%89%E6%9B%B4%E5%89%8A%E9%99%A4)
    - [その他](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E3%81%9D%E3%81%AE%E4%BB%96)
- [機能](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#main-content)

    - [コンテンツ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)
    - [リッチエディタ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)
    - [コンテンツAPI（GET）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84apiget)
    - [コンテンツAPI（WRITE）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84apiwrite)
    - [マネジメントAPI](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88api)
    - [Webhook](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#webhook)
    - [インポート / エクスポート](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88)
    - [API設定](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#api%E8%A8%AD%E5%AE%9A)
    - [レビュー](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC)
    - [メディア（画像/ファイル）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E7%94%BB%E5%83%8F-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)
    - [メンバー](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC)
    - [権限](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E6%A8%A9%E9%99%90)
    - [複数環境](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E8%A4%87%E6%95%B0%E7%92%B0%E5%A2%83)
    - [セキュリティ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3)
    - [その他](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%81%9D%E3%81%AE%E4%BB%96)
- [実装（全般）](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#main-content)

    - [トラブルシューティング](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)
    - [ユースケース別の実装方法](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%83%A6%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%82%B9%E5%88%A5%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95)
    - [API](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#api)
    - [Webhook](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#webhook)
    - [インフラ](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9)
- [実装（言語／フレームワーク）](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#main-content)

    - [JavaScript](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#javascript)
    - [Next.js](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#next-js)
- [お支払い](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#main-content)

    - [従量課金](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E5%BE%93%E9%87%8F%E8%AA%B2%E9%87%91)
    - [プラン変更](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E3%83%97%E3%83%A9%E3%83%B3%E5%A4%89%E6%9B%B4)
    - [解約](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E8%A7%A3%E7%B4%84)
    - [請求書](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E8%AB%8B%E6%B1%82%E6%9B%B8)
    - [支払いサイクル](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E6%94%AF%E6%89%95%E3%81%84%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB)
- [ご契約](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#main-content)

    - [Hobbyプラン](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#hobby%E3%83%97%E3%83%A9%E3%83%B3)
    - [Enterpriseプラン](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#enterprise%E3%83%97%E3%83%A9%E3%83%B3)
- [セキュリティ](https://help.microcms.io/ja/knowledge/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3?hsLang=ja#main-content)

    - [シングルサインオン](https://help.microcms.io/ja/knowledge/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3?hsLang=ja#%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%AA%E3%83%B3)
- [既知の不具合](https://help.microcms.io/ja/knowledge/%E6%97%A2%E7%9F%A5%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88?hsLang=ja#main-content)

    - [旧リッチエディタ](https://help.microcms.io/ja/knowledge/%E6%97%A2%E7%9F%A5%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88?hsLang=ja#%E6%97%A7%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)
- [その他](https://help.microcms.io/ja/knowledge/%E3%81%9D%E3%81%AE%E4%BB%96?hsLang=ja)

株式会社microCMS