There are already some great charts on the web, like

SM.MS sm.ms/

Figure shell imgkr.com

Pass by map bed imgchr.com/

So why do we build our own chart beds? Both because the coder likes to play around, and because it’s safer to store your own data. So let’s do it. Below is the demo address, you can first see the effect of the completion of the construction.

Xiaotuwo.github. IO Click the button to upload the image. After completion, you can copy the link and download it

Preparing the Front-end Environment

To install NodeJS, go to the NodeJS website and download it. We mainly use the NPM tool.

Install Taobao mirror, if it is in China, download the mirror is very slow, so use the domestic mirror.

Install vuE-CLI tool Because our front end uses VUE, we need to install vue-CLI

Create a project

Add antD dependencies

Start the

Access, the ability to access the HelloWorld page indicates that our environment is ready successfully.

Write front-end code

Here we build the basic environment is completed, the following began to write front-end code. We take SM.MS as the prototype to build. Below we only edit his head, upload part and tail

The finished product form is as follows. The interaction design of sm.ms dragging and uploading pictures is changed to clicking and uploading pictures. However, if you want to realize dragging and dragging, it is also very simple. www.antdv.com/components/…

The header and tail code is very simple, and we’ll only cover uploading part of the code. After setting up the Vue framework, go to the ANTD website provided above to find the Upload control, directly click to copy your favorite code style and paste it into content/index.vue. Then change a – the upload action for your server address, local test is http://localhost:8887/api/images/upload, also have a matching server-side code can be found below.

In the handlePreview method, I have added a copy link logic, which makes it easy to copy the image link when clicking on the preview. This makes it easy to put the url in another place to use.

Here the basic front end of the construction completed, you can directly view the source github.com/xiaotuwo/xi…

The server environment is ready

In this paper, US3 is used to build the chart bed. At present, US3 has 20G free storage and 20G free traffic per month, which is sufficient for self-use and starting.

Copy the link below to your browser to view the US3 official website. Registration is required for the first time. After registration is complete, go to the console to create the US3 space

After entering the space, fill in the storage name, either private space or public space. I created xiaotuwo.cn-bj.ufileos.com to save for later use.

In THE US3 console to create a token, is mainly used to upload, delete pictures used

Select the space you just created, set the age and click OK, remember to check the permission of the token

Click Finish to obtain the public and private keys and copy them for later use

Write server-side code

The server code is mainly divided into three parts: 1. Controller to receive requests; 2. Logic to upload pictures to US3; 3

1, write a Controller using MultipartHttpServletRequest receives the front end of the file file, called uCloudProvider to upload.

To upload a file to US3, I use Maven Filter to handle the configuration file. The configuration file is stored in POm

We will find that the configuration file in addition to the file configuration also has a set of yellow configuration, right this place is not the focus of this article, but the map bed must have the ability to yellow. Specific US3 logic code is also very simple, the main logic is to upload, use the private key and timestamp to generate links, display.

3. Return to content processing. It should also be noted here that in order to coordinate with ANTD’s UPOAD control, our DTOS are as follows

Server-side source access github.com/xiaotuwo/xi…

That’s where it all ends. Did you learn?