Image processing and upload for front-end development

the front page of the project is similar to the following figure, Taobao merchandise interface. Below, you need to show a few small pictures of rotation, and then click on the specific small picture, which shows the larger image.

now I am responsible for the backend management page of the store. In consultation with the backend engineer, they suggest that the front end find a way to achieve this function: when a picture is selected to be uploaded, two pictures, a large image and a small image, are saved when uploaded to the background. In this way, the merchandise page in the store can get two pictures.
could you tell me how to implement this?

Element-ui vue.js
Mar.07,2021

is not sure what implementation you want to ask.
[{thumbnail:xxx,imgUrl:xxx}] is this data structure or layout, or when uploading, the front end makes an image file large and small to the back end through canvas, or something?

1. The small image shown below is relatively small in size. You only need to save the large image at the back end, and you can control the display of the small image. Saving the small image at the back end is not recommended because the large size display of the small image is afraid of blurring.
2. If you have to save a large picture and a small picture, get the picture stream when uploading the picture, draw a large image and a small image by canvas, and then send it to the backend

.

Previous: Find out how many zeros there are between 1 and 1 million.

Next: Amap circle drag

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b067-2c26b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b067-2c26b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?