动动手:如何实现一个在线图片库

前言

如上图，这是一个图片库，支持上传、下载、预览、复制在线地址、传送门Web Box Image Upload，代码查看cxy-web-imges,实现起来也很简单

创建项目

请确保您的操作系统上安装了 Node.js（>= 12, v13 版本除外）。

使用 Nest CLI 建立项目。 在安装好 npm 后，使用下面命令在终端中创建 Nest 项目：

$ npm i -g @nestjs/cli
$ nest new project-name

初始化目录如下图所示：

配置存储桶

什么是存储桶，可以查看这篇文章什么是对象存储COS?

1、新建存储桶

2、创建成功后，我们复制下红色框的数据，后面会用到

3、查看密钥，保存SecretKey，SecretId

接口实现

在app.controller.ts文件编写接口代码

import {
  Controller,
  Post,
  UseInterceptors,
  UploadedFile,
  Req,
  Get,
} from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { cos, cosUpload } from './cos.storage';
import * as querystring from 'querystring';
const fs = require('fs');

@Controller('upload')
export class UploadController {
  @Post('single')
  @UseInterceptors(
    FileInterceptor('file', cosUpload('along-1254323745', 'ap-nanjing')),
  )
  async uploadSingle(@UploadedFile() file, @Req() request) {
    const originalFilename = file.filename;

    const params = {
      Bucket: 'along-1254323745',
      Region: 'ap-nanjing',
      Key: originalFilename,
      Body: fs.createReadStream(file.path)
    };

    try {
      await cos.putObject(params);

      return {
        code: 1,
        message: 'success',
        url: `https://along-1254323745.cos.ap-nanjing.myqcloud.com/${originalFilename}`,
      };
    } catch (error) {
      return {
        code: 0,
        message: error,
      };
    }
  }

  @Get('get')
  async findAll() {
    try {
      const get = await cos.getBucket({
        Bucket: 'along-1254323745', //存储桶名称
        Region: 'ap-nanjing', //所示地域
      });

      const Contents = get.Contents.reduce((c, n) => {
        c.push({
          size: n.Size,
          url: `https://along-1254323745.cos.ap-nanjing.myqcloud.com/${n.Key}`,
          name: n.Key.split('--')[1],
          create_time: n.LastModified,
        });
        return c;
      }, []);

      return {
        code: 1,
        message: 'success',
        list: Contents,
      };
    } catch (error) {
      return {
        code: 0,
        message: error,
      };
    }
  }
}

cos.storage文件配置

import * as COS from 'cos-nodejs-sdk-v5';
import * as Multer from 'multer';
import { v4 as uuidv4 } from 'uuid';
import * as querystring from 'querystring';

export const cos = new COS({
  SecretId: 'AKIDHVgW9iGl9LNF0b1GKI3iGetxRo1DH9pH',
  SecretKey: '',
  FileParallelLimit: 1,
});

export function cosUpload(bucket: string, region: string): Multer.Options {
  const storage = Multer.diskStorage({
    filename: (req, file, cb) => {
      const uniqueFileKey =
        uuidv4() + '--' + querystring.unescape(file.originalname);
      cb(null, uniqueFileKey);
    },
  });

  return {
    storage,
    fileFilter: (req, file, cb) => {
      if (file.mimetype.startsWith('image/')) {
        cb(null, true);
      } else {
        cb(null, false);
        return cb(new Error('Only .png, .jpg, .jpeg and .gif format allowed!'));
      }
    },
    limits: {
      fileSize: 50 * 1024 * 1024,
    },
  };
}

到此我们就已经实现了上传和查询的接口

上传: /upload/single
查询: /upload/get

跨域配置

安装cors,在main.js配置

import * as cors from 'cors';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.use(
    cors({
      origin: [
        //允许通过的域名
        'http://localhost:8888',
        'http://xyz.alongweb.top',
        'http://xyz.zxxweb.top',
      ],
      methods: ['GET', 'POST'],
    }),
  );

  await app.listen(3000);
}

部署

打包你的项目,执行npm run build,生成dist文件, 把dist文件丢到你的服务器。我用的是宝塔面板

首先确保你的服务器安装了pm2，打开终端，执行命令：

cd dist
pnpm i
pnpm start main.js

查看是否启动成功,status状态online代表启动成功.

到此大功告成！