In the previous chapter, we introduced Use of Graphic Bed Tools (Upload Components) In this chapter, we will analyze the implementation of the Graphic Bed Tool. We will teach you how to write a Graphic Bed Tool (Node Tool).

Before teaching begins, we need to prepare:

• Node Running Environment Node is used to develop the upload tool on the drawing bed

We hope you have the following knowledge:

(The following knowledge can also be skipped and directly started to learn this tutorial; mastery is for better understanding)

• es6 Basic Grammar
• fs module (Node core module)
• path module (Node core module)

Our basic goals

• Restrict the basic file format;
• The upload directory can be specified to complete the mapping between local directory and remote directory.
• Picture upload function;

Our advanced goal is:

• The upload component is decoupled into configurable items.
• The upload component is made into a drawing tool, which decouples the configuration from the component and is called by the external implementation.
• Provide scripts for windows and mac dual platforms, so that non-technicians can configure company static resources through this script; (e.g. banner chart, advertising chart)

(The following code implementation is saved in Plug-in Collection In the demo directory)

Basic objectives

Our first goal is to specify the upload directory, complete the mapping between local directory and remote directory. If we need to achieve this goal, we need a local directory. So we create a new local directory under the root directory, named images, and we pre-set some directories and image files, such as lower

Now our goal is to upload the image files of the local directory to the remote directory. Suppose the local directory address is local_url and the remote directory is remote_url, then the local directory file is local_url/images/blogs/plugins/upload/1.png. We need to upload the directory to the remote_url/images of the remote directory./ Blogs/plugins/upload/1.png.

So the first step is to parse the local directory and parse the image files of the local directory.

Let's create a new src/upload/index.js and define the supported image format first.

const DEFAULT_ALLOW_FILE = ["png", "jpg"];

After defining the supported image format, we started to search the directory.

// fs module for reading directories and files
const fs = require('fs');
// path module for parsing and assembling paths
const path = require('path');

const DEFAULT_ALLOW_FILE = ["png", "jpg"];

/**
 * Read the image files in the catalog and collect them in images
 * @param {*} entry Entrance
 * @param {*} images Picture Collection
 */
function readDir(entry, images = []) {
  const dirInfo = fs.readdirSync(entry);
  for (let i = 0; i < dirInfo.length; i++) {
    const item = dirInfo[i];
    // Path to assemble files/folders
    const location = path.join(entry, item);
    const isDir = fs.statSync(location).isDirectory();
    // If it is a folder, continue to recursively query down
    if (isDir) {
      readDir(location, images);
      // Determine whether the image format is allowed
    } else if (DEFAULT_ALLOW_FILE.some(allowScheme => location.endsWith(allowScheme))) {
      images.push(location);
    }
  }
  return images;
}

// Define the retrieved entry folder (images folder)
const staticDirPath = path.join(__dirname, '../..', 'images');
const images = readDir(staticDirPath);
console.log(images);

We execute the script using the node src/upload/index.js command. The final image retrieved is an array containing all the image file paths under the local images, that is, the local_url/image_path set we need.

Now let's take the last step and start uploading. Aliyun OSS provides a library, ali-oss. We use npm to install it, and then we import it in the head.

const OSS = require("ali-oss");

Then we write the uploaded code according to the API provided by Aliyun.

//...
// Convert Windows backslash paths to slash paths
const slash = require('slash');
const OSS = require("ali-oss");

//...
// These configuration parameters have been explained in the previous chapter and will not be repeated.
const client = new OSS({
  "region": "<your config>",
  "accessKeyId": "<your config>",
  "accessKeySecret": "<your config>",
  "bucket": "<your config>",
});

async function upload() {
  for (let i = 0; i < images.length; i++) {
    // slash is a feature that is compatible with the path partitioner of windows platform 
    const local_url = slash(images[i]);
    // Aliyun OSS Target File Name
    // local_url.split() is to remove the prefix of the local directory
    const remote_url = `images${local_url.split(staticDirPath)[1]}`;
    // Upload files sequentially
    const result = await client.put(remote_url, local_url)
    console.log(`${result.url} Upload Success`);
  }
  console.log("All files uploaded successfully");
}

upload();

We use the node src/upload/index.js command to execute the script. Here we can see the results of the execution. (My directory is different from the teaching directory, so the commands executed are not the same, you can see the address.) My source code)

So far, our basic goal has been achieved, and the advanced goal is expected to be accomplished by the reader himself, which is also a consolidation of Node's practice.

If you like, give a star.( Graphic Bed Transfer Tool and Bowen They are all original.

Star over 5 I will update the Advanced Chapter as soon as possible to teach you how to decouple components and create a graphics tool that non-technical people can use.