This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

What is a chart bed

In our work and life, we have some pictures that we want to show to others. In the absence of such chat tools as wechat /QQ, for example, in the forum, how can we show our local JPG to others?

The process goes something like this:

  1. Upload an image to a post, and the server will accept the image and put it into its own image server.
  2. Due to the uniqueness of the URL, each image has its own unique address, so other visitors to the post can see the image you upload through the address

So a graph bed is a picture server (that’s how I understand it).

Why do I need a drawing bed

For example, those of us who have used Markdown have experienced the situation of inserting images. So if your image is local, your Markdown will only preview correctly locally.

Once you post a Markdown to a forum such as Testerhome, the images in your Markdown will become invalid (because the path is local such as C:\Users\xxx.jpg).

Some students may doubt that if I post to a forum like TesterHome, they will automatically upload good pictures to me. Why not use their link then?

Your idea is very good, but just because the server is in someone else’s possession, they can do some anti-theft operations, resulting in some times you cannot access your pictures.

For example, if you post something in Jane’s book, the same Markdown takes it to Blog Garden and posts it again, the pictures are all dead. You can’t do more than one picture.

Also, if you have a Web server with a lot of user avatars, storing Base64 takes up a lot of space. If on the www.nidetupian.com/abc.jpg address,.

Let’s look at the effect of the chart bed

This is a map bed made by myself, it can automatically upload pictures to the map bed, and then it has its own unique URL, you don’t believe you try this link. The goal is to better support your markdown editor, which sucks, but works.

Gitee.com/woodywrx/pi…

Common drawing bed

In fact, not only graph bed, some relatively small files, such as pictures, TXT such static resource files can be put into the server.

The following are common:

  • oss

    Oss is basically a file server that can store your local files, give you links to preview, upload, download, etc. Such a service for pictures, naturally is not a problem.

    Common ali cloud OSS, seven Niuyun, Tencent cloud COS and so on. But they all have a common shortcoming, charge, and storage charge, read when also charge for data.

  • github page

    That’s the point of the day, because there’s nothing more fun than a hooker. But Github is often blocked in China, so let’s talk about Gitee.

    Gitee, also known in Chinese as “Code Cloud,” is basically China’s github, hosting a number of code repositories.

    So it naturally supports Github Page, that is, static resource server. This means we can put images on their servers and access them through the URL they give us. (They haven’t done it yet, and probably won’t)

    The most important thing is free.

Configure the Gitee chart bed

  • Build a new warehouse

    You can call it anything you want.

  • Go to Services -> Gitee Page

Note that there is a need for real name authentication, which is required recently, so you can authenticate it if you need it.

  • Apply for token

    Once configured as instructed, we need to apply for our own token, which is used to create and submit files. (Git related operations, after all)

Go to the personal Settings page to generate a token.

The overall train of thought

In essence, after uploading the image, we can call gitee’s create file interface. Of course, we need 3 parameters:

  • owner

    Gitee user name

  • repo

    Warehouse,

  • token

    The token you applied for just now

  • content

    Base64 encoded string (converted from files)

  • filepath

    The path to the file to be created, if any, is directory/file name

The back-end code

A complete Gitee file creation process is shown here, using a third-party library: Resty as the HTTP request library.

type GiteeRepo struct {
	user  string
	repo  string
	token string
}

func NewGiteeRepo(user, repo, token string) *GiteeRepo {
	return &GiteeRepo{
		user:  user,
		repo:  repo,
		token: token,
	}
}

// CreateFile create image file in gitee according to timestamp
func (g *GiteeRepo) CreateFile(img string) (string, error) {
	client := resty.New()
	// Get the current date as the directory
	date := time.Now().Format("2006-01-02")
	// Get the current timestamp +image.png as the file name to prevent duplication
	filepath := fmt.Sprintf("%v/%v-image.png", date, time.Now().Unix())
	// Send HTTP request, body is token to submit information and file content (base64)
	resp, err := client.R().
		EnableTrace().
		SetBody(map[string]string{"access_token": g.token, "message": "from mdnice_plus"."content": img}).
		Post(fmt.Sprintf("https://gitee.com/api/v5/repos/%s/%s/contents/%s", g.user, g.repo, filepath))
	iferr ! =nil {
		return "", err
	}
	ifresp.StatusCode() ! =201 {
		return "", fmt.Errorf("create file failed")}// The url is the address returned by the repository after you submit it, consisting of the username/repository/file path
	url := fmt.Sprintf("https://gitee.com/%s/%s/raw/master/%s", g.user, g.repo, filepath)
	return url, nil
}
Copy the code

It should also be added that the server receives the uploaded image file, determines whether it is a normal image file format, and then converts the image to Base64, which we won’t go into for space reasons.

To this, a map of our own bed on the production of good, if you do not mind, you can also put TXT, JSON and other browser can identify the content, the overall is very good to use.

You can set up a private warehouse to store some things that you are not very private, but have no place to back up. That’s more than just bed mapping.