Tech gurus who love to write articles probably have their own online photo management tool.

Especially when writing markdown, we often need to insert some relevant pictures at appropriate places in order to make our articles “illustrated” and not boring.

{it is said that | xia shuo} images can effectively reduce the reader’s visual fatigue, make the brain has a short buffer effect.

However, inserting images into Markdown is heavily dependent on images that are available online. Without a dedicated image management tool, inserting an image can be a real pain in the butt.

introduce

Thanks to the rise of cloud development concepts, the road to the full stack of front-end partners has become a lot easier.

No server, no database, no OSS, no Linux; Of course, the key is that it’s all free!

Whether ali cloud, or Tencent cloud, every month is free of charge. Even if you go over the limit, charging by the amount is very cost-effective. Anyway, I didn’t.

UniCloud is a cloud development platform for developers based on Alibaba Cloud and Tencent Cloud. Why uniCloud? Thanks to the whole ecology of the UNI family, it can be perfectly connected. The entire process from development to deployment is ready for you, just use it.

Open to

2.1 Creating a Project

You can choose from uni’s official recommended HBuilderX creation mode or from the CLI command line mode, see the official documentation for more.

Here is a project template to create vite + TS + vue3 using the CLI command line:

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
Copy the code

2.2 Creating a Cloud Service Space

Go to uniCloud console to create a service space, you can freely choose Ali Cloud and Tencent cloud, it is recommended to choose Ali Cloud.

Then open the previously created project through HBuilderX, right click on the root directory of the project and select Create uniCloud Cloud Development Environment, then select Ali Cloud or Tencent Cloud to create.

Finally, right-click on the uniCloud folder and associate it with the cloud service space you created earlier.

2.3 Uploading Images

The main step is to select a local image using the uni.chooseImage method and then upload the image to the cloud using uniCloud’s apiunicloud. uploadFile method.

The API calling uniCloud must be initialized in the project first, that is, associated with the cloud space you have opened.

UniCloud initialization:

/ /... Other code has been omitted
onLaunch() {
  // Cloud space initialization
  uniCloud.init({
    provider: 'aliyun'.spaceId: 'xxxxxxxxxxxxxxxxxxxxxxxxx'.clientSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxx'}); },Copy the code

SpaceId and clientSecret go to the uniCloud console to get them.

Uploading images to cloud storage:

const res = await uniCloud.uploadFile({
  filePath: file.path,
  cloudPath: `${hash}/${file.name}`.onUploadProgress: (res) = > {
    const { loaded, total } = res;
    console.log(loaded, total);
    this.$set(this.imgList[0].'uploadPercent', (loaded / total) * 100); }});console.log('File uploaded successfully', res);
Copy the code

To prevent file duplication, calculate the MD5 code of the file as the hash value and compare it with the hash value of the uploaded file. Of course, this function can be done or not done, no harm.

2.4 Image information is stored in the database

If you want to save all your uploaded images for future use or synchronization between devices, you’ll have to save the location of each uploaded image and its associated information in the cloud.

The good news is that uniCloud’s database is also free. But also support in the client side direct operation database, cloud functions these are saved, simply do not too convenient.

The first step is to create a data table, either in the uniCloud console or directly in code. For simplicity, it is recommended to go directly to the console and create it. Refer to the documentation.

To operate the database directly in the front end, you need to define the table structure DB Schema, so that when inserting data, you can automatically perform some field verification.

Insert image information into database:

interfaceAlbum { _id? :string;
  name: string;
  url: string;
  hash: string; createAt? :number; updateAt? :number;
}

export function saveAlbum(data: Album) {
  const collection = uniCloud.database().collection('Name of the table you created');
  return collection.add(data).then(({ result }: any) = > result);
}
Copy the code

2.5 Reading the Picture List

Directly on the code:

interface AlbumListQuery extendsPartial<Album> { pageIndex? :number, pageSize? :number,}export function getAlbumList(query? : AlbumListQuery) {
  const collection = uniCloud.database().collection('Name of the table you created');
  const { pageIndex = 1, pageSize = 20. data } = query || {};return collection.where(data).orderBy('updateAt'.'desc').orderBy('createAt'.'desc').skip(pageSize * (pageIndex - 1)).limit(pageSize).get().then(({ result }: any) = > result);
}
Copy the code

2.6 Deployment Online

The benefits of the Uni family are now fully realized, even the page hosting is ready for you, go to the console and open directly to use.

Now a picture management platform with basic functions is complete. According to the official tip of uniCloud: to avoid resource abuse, my project is not open source. Everyone can build their own, only formal learning and communication oh.

Other methods

. Don’t worry, guest officer!!

If you think the above tutorial is too poorly written to follow, that’s fine. Let me share two more simple and crude methods.

  1. Github
  2. Gitee

That’s right, those two guys!

All you have to do is put the pictures in storage!

You don’t have to write a word of code, you don’t have to type a command. And images on Github are accessed via Jsdelivr, so there’s no need to worry about speed.

Here are two warehouses that I created for reference:

gitee.com/moohng/cdn

Github.com/moohng/buck…

Usage:

https://gitee.com/moohng/cdn/raw/master/README.md | | fixed address username name branch | -- - | | | warehouse name the file path https://cdn.jsdelivr.net/gh/moohng/bucket@main/1627887240043-Javascript_01.jpg | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | -- - | -- - | -- - | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | a fixed address + user name + warehouse name + branch + file pathCopy the code

There are also many third-party tools that can support image uploads from multiple platforms. But I think there are several methods completely enough, and the reliability is relatively high, but also do not worry about a long time the picture hung.

finished

If you have a better idea, feel free to discuss it in the comments section.

Finally, thanks for reading! Can also pay attention to my public number [doomsday code farmers], we learn together, progress together!