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

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.

<<:  The closure of domestic online storage has made users worry about where the next outlet will be.

>>:  Android unit testing - verify the correct posture of function parameters and return values

Recommend

In the era of intelligent computing, a Chinese answer

This year, as AI big models have been rapidly rec...

The marketing value of Toutiao content!

KOL content marketing is becoming more and more p...

Refined operation of brand users turning into KOCs

For today’s brands, if they want to do well in th...

Hot-selling product marketing strategy

This article summarizes the five most frequently ...

Don't buy this kind of crappy socket!

According to the data from the Ministry of Public ...

What are some free online marketing promotion methods?

1. Soft article promotion Soft article promotion ...

6,000 worms in one snail! What kind of snail can eat so much?

Audit expert: Li Weiyang Well-known science write...

Why have we done so much but the seed users just don’t buy it?

Friends who are engaged in operations may have fe...