0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

StrapiからGCSへファイルをアップロードする方法

Strapi Advent Calenderの8日目は、StrapiのAPIを介して、ファイルをGoogle Cloud Storageへアップロードする方法を紹介します。

Strapi Advent Calenderのその他の記事はこちら

GCS接続準備

  1. GCPでサービスアカウントを作成(ロールはストレージ管理者)・サービスアカウントJSONをDL

  2. Strapiにstrapi-provider-upload-google-cloud-storageモジュールをインストール

$ npm i strapi-provider-upload-google-cloud-storage

3.Strapiの<project_name>/config/plugin.js に追記

module.exports = ({ env }) => ({
 upload: {
   provider: 'google-cloud-storage',
   providerOptions:{
     "serviceAccount": "サービスアカウントJSON",
     "bucketName": "<GCSのバケット名>",
     "baseUrl": "https:// storage.googleapis.com/<GCSのバケット名> "
   }
 }
});

1. ファイルのみPOSTするときの例(/upload)

ファイルだけアップロードする場合は、StrapiのUploadプラグインを使用します。

example.ts
    const body = new FormData();
    body.append('files', fileObject);
    return this.http
      .post(environment.apiUrl + '/upload', body)
      .toPromise()
      .then((res) => {
        const response: any = res;
        return response;
      })
      .catch(this.errorHandler);

2. ファイルを含んだコレクションタイプをPOSTするときの例(/collection type)

ファイルだけアップロードするときとは違い、コレクションタイプのcreate APIにPOSTする形になります。
FormDataにファイルデータを追加する前に、一旦ファイル以外のデータをキー名'data'として、JSON文字列に変換して追加します。
ファイルデータは、キー名をfiles.{フィールド名}にして追加します。

ex) 画像のようなコレクションタイプに対してPOSTする場合

example.ts
    const body = new FormData();
    // Mediaタイプ以外のフィールドをdataに格納
    body.append('data', JSON.stringify({
      user_id: '01',
      text: 'aaaaaa',
    }));
    // ファイルをfiles.{フィールド名}に格納
    body.append('files.photo', fileObject);
    JSON.stringify(body);
    return this.http
      .post(environment.apiUrl + '/messages', body)
      .toPromise()
      .then((res) => {
        const response: any = res;
        return response;
      })
      .catch(this.errorHandler);
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?