The front end selects local files and displays the selected files on the interface for preview. You can select four files to preview at the same time.

The idea is as follows:

The front-end selects local pictures in png, jpg and other formats, and sends the pictures to the back-end server in binary form. After the back-end processes the binary image, it returns to the front-end server to link the online image, which can be accessed by opening the link in the browser. Then the front end renders this picture link on the page for preview.

first

Let's take a look at the official documentation of uniapp:

https://uniapp.dcloud.io/api/media/image? Id = select image

Something like this.

Write a simulation demonstration first.

1: First, I used the framework of colorUI and introduced it into the project.

Introduction of vue file under the page

So you don't need to write any style, just use what you wrote.

The effect is this.

Each picture will be displayed on the page after it is selected. I set here that you can choose up to four pictures. The image link uses a temporary blob, and then you will pass your local binary file to him through the interface given by the back-end partner.

Write a successful callback function after chooseImage selects a picture, and add an image uploading method, such as uploadFile and url, to the return function.

If the request is successful

Return a picture link.

After adding the interface, the demonstration is as follows: