こんにちは、おーしまです。
今回は、自動車レビューサイトで画像編集がうまくできず、全然解決できないので、問題を整理する意味でも、とりあえず記事にしてみました。
今起きている問題は、
編集画面で画像を変更しない場合、そのまま前回保存した画像が維持されるが、
画像を変更した場合、前回で保存されていた画像が消えてしまう
画像が2枚保存されているレビュー
編集画面に遷移すると、先に保存されていた2枚の画像のプレビューが表示されるが、これは自分でjavascriptで元々保存されていた画像をただプレビュー表示しているだけなので、関係ない
新たに1枚画像を増やして、更新
元々、保存していた2枚の画像が消え、新しく増やした画像のみになってしまう
ということです。
この画像の部分はメルカリの画像添付機能部分を意識して作っているのですが、メルカリでは、流石にこんな事になりません。
メルカリのサイトを検証ツールで覗いたり、自分なりに考えた結果
非同期通信で画像を選ぶたびに、画像を更新する
という解決策しか思い浮かびませんでした。
というのも、メルカリの画像プレビューの動作を検証ツールで覗いていると、input要素が一つしかないことに気がつきました。
ここからは仮説ですが、
私のアプリの場合は複数枚画像投稿をする際は、画像の数だけinput要素があり、それをまとめて保存するものでした。今はstyle="display: none;"で隠していますが、表示させると、
こんな感じで画像の数だけinput要素があります。
メルカリの場合はinput要素が「選択されていません」の1つしかなく、画像を選択するたび、そのinput要素が消え、新しく「選択されていません」のinput要素が増える形となっていました。よって、画像を選択するたびに、1枚ずつデータベースに保存、削除するたびにデータベースから削除しているのだと思います。じゃないと、input要素が一つしかないのはおかしいと思う。あと、プレビューを表示するまで少しロードしているような時間がある。
って感じなので、javascriptで画像ファイルがchangeするたびに、jsonで非同期通信で保存させる仕組みを作っていきたいと思います。
っと思ったのですが、違う方法で実装しました。
こちらを参照してください。
tomo-bb-aki0117115.hatenablog.com
今回はここまでだ。
さらば。
