Egg.js to achieve single file upload, multiple file upload, according to the date storage

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

The realization of upload function

1. Set the type of the upload form to File.

Note: The name attribute is indispensable.

<li> food image: <input type="file" name="picUrl" /></li>
Copy the code

2. Configure the mode for uploading files

  // Configure the mode for uploading files
  config.multipart = {
    mode: 'file'
  };
Copy the code

3. Configure CSRF attributes

The encType attribute is indispensable.

 <form action="/<%=adminPath%>/product/doAdd? _csrf=<%=csrf%>" method="post" enctype="multipart/form-data">
Copy the code

4. Set the route to POST

router.post(` /${config.adminPath}/product/doAdd`,controller.admin.product.doAdd);
Copy the code

5. File is read from the controller

  async doAdd() {
    const {ctx} = this;
    const body = ctx.request.body;
    const file = ctx.request.files[0];
    ctx.body = {
      body: body,
      file: file
    }
  }
Copy the code

Saves the uploaded file in the specified location

1. Installing the Tool Package

npm i mz mz-modules --save
Copy the code

2. Introduce toolkits into the controller

const path = require('path');
const fs = require('mz/fs');
const pump = require('mz-modules/pump');
Copy the code

3. Create a folder to upload to, this folder should be created in advance (public/upload)

4. Controller read and write logic implementation

async doAdd() {
    const {ctx} = this;
    const body = ctx.request.body;
    const file = ctx.request.files[0];
    // Get the file name
    const filename = file.filename;
    const targetPath = path.join('app/public/upload',filename);
    // Read the file
    const source = fs.createReadStream(file.filepath);
    // Create a write stream
    const target = fs.createWriteStream(targetPath);
    try {
      await pump(source,target);
    } finally {
      await ctx.cleanupRequestFiles();
    }
    ctx.body = "Write succeeded"
  }
Copy the code

Realize multiple file upload

1. Static page Settings are as follows:

2. The core implementation logic of the controller

  // Implement multiple file uploads
  async doAdd() {
    const { ctx } = this;
    const body = ctx.request.body;
    const files = ctx.request.files;
    try {
      for (let file of files) {
        const filename = file.filename;
        const targetPath = path.join('app/public/upload', filename);
        // Read the file
        const source = fs.createReadStream(file.filepath);
        // Create a write stream
        const target = fs.createWriteStream(targetPath);
        awaitpump(source,target); }}finally {
      await ctx.cleanupRequestFiles();
    }
    ctx.body = {
      body, files
    }
  }
Copy the code

Upload pictures by date folder

Here’s what it looks like:

1. Introduce toolkits into services

const sd = require('silly-datetime');
const path = require('path');
const mkdirp = require('mz-modules/mkdirp');
Copy the code

2. Define the upload path in the configuration file

  // Set a path for uploading images
  config.uploadDir = "app/public/upload";
Copy the code

3. Define functions to create paths and folders in the service

  async getUploadFile(filename) {
    // Get the current date
    let day = sd.format(new Date(),'YYYYMMDD');
    // Create a path to save the image
    let dir = path.join(this.config.uploadDir,day);
    await mkdirp(dir);

    // Generate the file name
    let unix = this.getUnixTime();
    let saveDir = path.join(dir,unix + path.extname(filename));
    return saveDir;
  }
Copy the code

4. Asynchronously call the file path in the controller

const targetPath = await this.ctx.service.tools.getUploadFile(filename);
Copy the code

Below is the appendix for all the controller code

async doAdd() {
    const { ctx } = this;
    const body = ctx.request.body;
    const files = ctx.request.files;
    try {
      for (let file of files) {
        const filename = file.filename;
        // const targetPath = path.join('app/public/upload', filename);
        const targetPath = await this.ctx.service.tools.getUploadFile(filename);
        // Read the file
        const source = fs.createReadStream(file.filepath);
        // Create a write stream
        const target = fs.createWriteStream(targetPath);
        awaitpump(source,target); }}finally {
      await ctx.cleanupRequestFiles();
    }
    ctx.body = {
      body, files
    }
  }
Copy the code