没有不值得去解决的问题,也没有不值得去学习的技术!

How to Implement Image Management for Adding and Editing

The final implementation flow is: on the add form page, only uploading an image is allowed; after a successful upload, it automatically redirects to the image edit page

作者:

在

1. Currently, on the article add|edit page, the article’s cover image is uploaded by calling the image/upload API. The API responds with the image’s ID from the images table, and then when the form is submitted, this ID from the images table is written to the cover_image_id field in the articles table. See Figure 1.

Currently, on the article add|edit page, the article's cover image is uploaded by calling the image/upload API. The API responds with the image's ID from the images table, and then when the form is submitted, this ID from the images table is written to the cover_image_id field in the articles table
Figure 1

2. I now plan to implement an image management feature and also want to reuse the image/upload API for image uploads. However, when adding and editing an image, submitting the form should not result in additional records being inserted into the images table. Referring to WordPress’s Media Management, adding an image is split into 2 steps: the first step is uploading an image, and the second step is editing the image information. See Figure 2.

I now plan to implement an image management feature and also want to reuse the image/upload API for image uploads. However, when adding and editing an image, submitting the form should not result in additional records being inserted into the images table. Referring to WordPress's Media Management, adding an image is split into 2 steps: the first step is uploading an image, and the second step is editing the image information.
Figure 2

3. The final implementation flow is: on the add form page, only uploading an image is allowed; after a successful upload, it automatically redirects to the image edit page. See Figure 3.

The final implementation flow is: on the add form page, only uploading an image is allowed; after a successful upload, it automatically redirects to the image edit page
Figure 3

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系