A brief introduction.

Is the front end still passing files to the back end? Can your servers hold up? What…… Boss throw money and machine? ! Say goodbye! Formation /

Front-end and back-end file transfer involves large data, which often becomes a performance bottleneck for many projects. There are many common transmission methods, relatively speaking, OSS direct transmission can reduce a lot of pressure.

In this paper, we will list several common and OSS direct transmission modes, and list their advantages and disadvantages.

Two. Common ways

1. Upload the form

Form upload file is the most common way, front and back developers are very easy, front clok clok pass, back clok clok close. The process is shown below.

Advantage:

  • Simple and convenient, small amount of development
  • Front-end and back-end native support without additional third-party library support

2. Upload Base64

Base64 uploading files is common for small files, such as small pictures. Both the front and back ends can directly use String to send and receive files. On the front end, however, you need to convert files to Base64 data, which not only adds some performance overhead, but also increases the volume of data transferred. For the back end, if you do not want to store base64 data directly, you also need to convert it to a file for storage, which also increases the performance cost of the back end.

This upload method works with the Resetful Api, encrypts files, carries files through the callback interface, and so on. The process is shown below.

Advantage:

  • Apply toResetful Api, which can be used in encryption and callback scenarios

Disadvantage:

  • Back-end file and Base64 data conversion costs performance
  • Only for short articles

Three. OSS direct transmission

The OSS direct transmission solutions here are all OSS products of Ali Cloud. The following three solutions are introduced, which can be applied to different scenarios.

1. Browser.js SDK upload

This solution can upload files to OSS directly through browser.js on the front end, which can be divided into three steps:

  1. The front end uses SDK direct OSS
  2. After the front-end upload is complete, request the back-end to notify the upload is complete
  3. Back-end check whether the file exists on OSS (Optional)

The process is shown in the figure below.

Browser.js requires the front end to install ali Cloud library Ali-OSS, and then call in the front end. Direct transmission also requires the Key and Secret of the OSS account, so for security reasons, a RAM account needs to be established, and then the front end and the back end first request an STS temporary access certificate to complete direct transmission, as shown in the following figure.

2. Direct transfer of Javascript client signature

Javascript client signature direct pass, need to obtain the temporary signature from the back end first, its process is roughly the same as the browser.js scheme of the previous step, the difference lies in:

  • No third party library support, direct form upload
  • Native support for calls back on the backend (covered in the next step)

The process is shown in the figure below.

However this plan does come down, I feel the biggest problem is authority configuration a bit troublesome…… / tears

3. The server sends the signature directly and sets the uplink call

This solution is actually an upgraded version of the previous solution, Javascript client signature direct pass, with the addition of the back-end call function. Good yo ~

The front-end needs to be changed very little, just to add a callback parameter to the request parameters, which is the backend encryption and is returned together in the response to the signed request, encrypting the backend callback interface. After the front-end direct transmission is complete, the back-end callback interface will receive related file parameters, including file path, size, type, and so on. Finally, OSS will forward the callback interface Response to the front end to respond to requests directly to OSS.

The process is shown in the figure below.

Contrast four.

Traditional OSS has three disadvantages compared to direct OSS:

  • Slow upload: User data must be uploaded to the application server first and then to the OSS. Network transmission time is twice as long as direct transmission to OSS. If user data is transmitted directly to OSS rather than through the application server, the speed is greatly increased. In addition, OSS uses BGP bandwidth to ensure the transmission speed between local operators.
  • Poor scalability: If there are many subsequent users, the application server will become a bottleneck.
  • High cost: Multiple application servers are required. Since OSS upload traffic is free, several application servers can be saved if data is sent directly to OSS instead of through application servers.

Of course, for smaller, lower-cost projects, the common upload method is still suitable, after all, there is no best, only the most suitable.

5. Reference documents

  • Introduction to Web uploading

  • JavaScript client signature direct pass

  • The server signs direct and sets up the call back

Vi. Links to the original blog

  • My blog