strapiで画像などをアップロードしてみた

strapiでfetchを使って画像をアップロードしてみました。

メディアライブラリへ画像などアップロードする

1. FormData(uploadData)にアップロードしたい画像などをappendする
2. /uploadに向かってuploadDataをpostする
   

    const uploadData= new FormData();
    uploadData.append('files', inputFile); //inputFileは<input type="file">などからとってきてください

    try {
      await fetch('http://localhost:1337/upload', {
        method: 'POST',
        body: uploadData
      })
    } catch (error) {
      console.log(error);
    }

注意

appendするときのnameは'files'にする必要があります。他のにしていると、{"id":"Upload.status.empty","message":"Files are empty"}が返ってくるので注意。

uploadData.append('files', inputFile);

エントリ作成中に画像をアップロードする

メディアライブに画像をアップロードするだけでなく、エントリ作成と同時に画像をアップロードしたい場合のアップロード方法。テキストフィールドとメディアフィールドにデータを詰め込んでエントリを作成できる。
1. FormData(uploadData)のfiles.imageにアップロードしたい画像などをappendする
1. FormData(uploadData)のdataにアップロードしたいテキストデータをappendするs
2. /testに向かってuploadDataをpostする

    const uploadData= new FormData();
    const inputText= {
      title: "hoge",
      description:"hogehoge",
    };
    uploadData.append('files.image', inputFile); //files.imageのimageはフィールド名(メディアタイプ)
    uploadData.append('data', JSON.stringify(inputText));

    try {
      const responce = await fetch('http://localhost:1337/test', { //testには自分で作成したコレクション名を入れる
        method: 'POST',
        body: uploadData
      });
    } catch (error) {
      console.log(error);
    }

post前後のエントリは下記のようなイメージ。

⓵postする前

id	title（テキスト）	descriotion（テキスト）	image（メディア）
1	fuga	fugafuga	-

⓶postした後

id	title（テキスト）	descriotion（テキスト）	image（メディア）
2	hoge	hogehoge	画像データ（メディアライブラリに紐づく）
1	fuga	fugafuga	-

参考

• https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload-file-during-entry-creation