やりたいことは、input type=fileで画像をアップロードした際に、
ファイルオブジェクトが取得できると思いますが、
それをinput type=fileを使用せずに、手動で画像パスを指定して作成できるようにしたいです
なぜ手動でファイルオブジェクトを取得したいのかというと、useStateにinput type=fileで選択した画像を渡すようにしているのですが、useStateの初期値にデフォルト画像のファイルオブジェクトを指定したいからです。
そして、そのファイルオブジェクトをバックエンド側にpostしたいと思っています。
試したこととしては下記のソースのdefaultImgFileで作成したつもりなのですが、うまくいかず
知っている方いましたら、ご教授いただきたいです。
Test.tsx
1import React, { useState } from 'react' 2import Image from 'next/image' 3 4const defaultImgFile = fetch('/images/icon_default_logo.svg') 5 .then((res) => res.blob()) 6 .then((blob) => { 7 console.log(blob); 8 }); 9export const Test = ()=>{ 10 const [imgFile, setImgFile] = useState<File>(new File([defaultImgFile], 'icon_default_logo.svg', { 11 type: 'image/jpeg', 12 })) 13 ...etc 14 15 return( 16 //デフォルトIMGかinput type=fileでアップロードした画像のどちらかをラジオボタンで選択してpostするようにする 17 ) 18}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。