Combining Vue.js's front-end compression image solution

[[175194]]

It's a simple solution. Well, it's true.

Why do this?

With the booming development of mobile Web, there are too many applications that require users to upload image files on mobile Web. Because of this, we have some difficulties to overcome:

1. The upload progress is slow under low network speed, and the user experience is poor
2. Under high concurrency, the background processing of large uploaded files is stressful
3. Maybe there are more...

When overcoming some of the above difficulties, we can also ask ourselves some questions:

1. Is it really necessary to save the original images uploaded by users?
2. How long can users wait?
3. Maybe there are more...

Combining the above difficulties and questions with our actual cases, we may be able to do this: When users upload pictures, compress the pictures before they are submitted to the background. After the picture file size is reduced, the upload speed will naturally increase. Under the same concurrency, the background processing speed will also be improved, and the user experience will be improved.

Some people may ask, why not use some mainstream CDN form functions to upload files directly to CDN? Of course, you can choose that solution. I just chose one of the many solutions to use. Or is this the nature of programmers?

Prepare

As mentioned above, "When users upload pictures, they are compressed before being submitted to the backend." Let's prepare various tools right away:

1. localResizeIMG (core, used to compress images on the front end)
2. Vue.js (processing front-end data and displaying logic)
3. Bootstrap (need I say more?)

How to do it?

1. After uploading the project changes, use localResizeIMG to compress
2. Submit the data to the backend in the way you expect

When calling localResizeIMG, you can specify the width, height, and quality of the compressed image (refer to the documentation for details). As for how to submit the data to the background, you can refer to the solution mentioned in the wiki of the library. Everything is very simple.

Demo address

The warehouse address for this example

The solution in this article is not the only one, nor is it necessarily the best one. If you encounter problems when using related frameworks/libraries, you can go to the corresponding Github repository to view the issue or wiki.