This series is all a hands-on series, see some demos to implement it and share with them.

Today just saw a piece of article block upload article, and did not achieve their own. Think about it and do it both ways. Writing is not good, please excuse me, do not understand the comments see back. As the saying goes, people who dig Wells do not forget what they drink

Upload optimization of large size files — Bump lab

The overall train of thought

Uploading files in blocks:

The front-end Blob is mainly used for Slice cutting. Then the back end merges the chunks into a complete File (File is inherited Blob object)

Blob MDN reference link

Breakpoint continuingly

This function is also implemented on the basis of file block upload. We split a file into several blocks, and then re-upload the file to match and select the unuploaded blocks for uploading.

A pass from the file

This is actually a fake feature… Maybe that’s how I got it. If the file uploaded by the user has a HASH value, the file is copied to the user from the server.

Functional analysis

Something like that. All right, let’s implement that. Let’s borrow this picture from Bump Lab (lol too lazy to make my own picture)

  • Whether the file has been uploaded completely
  • Upload file block
  • Merge blocks that have been uploaded

Golang implementation

Create routing

This tutorial uses Gin to implement routing, of course, pure native implementation. It’s the same. Try to draw inferences.

File check

Implement the first interface to fetch file status and upload file blocks

Upload the block

Block merge

The front-end implementation

Since we upload files, of course we need an upload box.

    <input type="file">
Copy the code

preparation

Prepare the interfaces let’s prepare the three request interfaces, which correspond to the above three interfaces

File block

When the user selects the file, we slice it up

Compute file HASH

A library is used for MD5, and an address is provided below. Of course, you can also choose other places to download or NPM

<script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
Copy the code

Interface calls upload file

Source code address ~