COOL

文件上传

文件上传基于midwayjs 文件上传open in new window，midwayjs 文件上传open in new window提供了多种形式的上传方式如：阿里云ossopen in new window、腾讯云cosopen in new window等，为了更好地与前端配合，cool-admin封装了四种上传方式

  • 本地文件上传；
  • 阿里云OSS前端直传；
  • 腾讯云COS前端直传；
  • 七牛云QINIU前端直传；

提示

框架默认为本地上传，但是我们并不推荐这种形式，条件允许尽量使用云存储，使用云存储有多种好处：

  • 动静分离，不占用服务带宽；
  • 便于分布式部署；
  • 方便的功能，如大小图、打水印等；
  • 有利于安全；
  • ...

配置插件

安装插件@cool-midway/fileopen in new window，该插件包已经包含了四种上传方式，无需引入其他包

yarn add @cool-midway/file

npm install @cool-midway/file --save

src/configuration.ts

import { Configuration, App } from '@midwayjs/decorator';
import { join } from 'path';
import * as file from '@cool-midway/file';


@Configuration({
  imports: [
    file
  ],
  importConfigs: [join(__dirname, './config')],
})
export class ContainerLifeCycle {
  @App()
  app: koa.Application;

  async onReady() {
  
  }
}

上传模式

前端需要根据服务端配置的上传模式，切换自己的上传方式，获得上传模式

import { Get, Inject, Post, Provide } from '@midwayjs/decorator';
import { CoolController, BaseController } from '@cool-midway/core';
import { Context } from 'koa';
import { CoolFile } from '@cool-midway/file';

/**
 * 文件上传
 */
@Provide()
@CoolController()
export class AppDemoFileController extends BaseController {
  @Inject()
  ctx: Context;

  @Inject()
  file: CoolFile;

  @Get('/uploadMode', { summary: '获得上传模式' })
  async uploadMode() {
    return this.ok(await this.file.getMode());
  }
}

本地上传

基于midwayjs 文件上传open in new window

配置

src/config/config.default.ts

import { CoolFileConfig, MODETYPE } from '@cool-midway/file';
import { MidwayConfig } from '@midwayjs/core';
import * as fsStore from 'cache-manager-fs-hash';

export default {
  // 修改成你自己独有的key
  keys: 'cool-admin for node',
  koa: {
    port: 8001,
  },
  // cool配置
  cool: {
    file: {
      // 上传模式 本地上传或云存储
      mode: MODETYPE.LOCAL,
      // 本地上传 文件地址前缀
      domain: 'http://127.0.0.1:8001',
    } as CoolFileConfig,
  },
} as unknown as MidwayConfig;

警告

必须配置正确的文件地址前缀，这样才能保住文件可以正常被访问

上传

src/modules/demo/controller/app/file.ts

import { Get, Inject, Post, Provide } from '@midwayjs/decorator';
import { CoolController, BaseController } from '@cool-midway/core';
import { Context } from 'koa';
import { CoolFile } from '@cool-midway/file';

/**
 * 文件上传
 */
@Provide()
@CoolController()
export class AppDemoFileController extends BaseController {
  @Inject()
  ctx: Context;

  @Inject()
  file: CoolFile;

  @Post('/upload', { summary: '文件上传' })
  async uplod() {
    return this.ok(await this.file.upload(this.ctx));
  }
}

阿里云oss

配置

src/config/config.default.ts

import { CoolFileConfig, MODETYPE } from '@cool-midway/file';
import { MidwayConfig } from '@midwayjs/core';
import * as fsStore from 'cache-manager-fs-hash';

export default {
  // 修改成你自己独有的key
  keys: 'cool-admin for node',
  koa: {
    port: 8001,
  },
  // cool配置
  cool: {
    file: {
      // 上传模式 本地上传或云存储
      mode: MODETYPE.CLOUD,
      oss: {
        accessKeyId: 'your access key',
        accessKeySecret: 'your access secret',
        bucket: 'your bucket name',
        endpoint: 'oss-cn-hongkong.aliyuncs.com 换成你自己的',
        timeout: '3600s',
      } as OSSConfig,
    } as CoolFileConfig,
  },
} as unknown as MidwayConfig;

跨域

前端签名直传用于浏览器安全限制，在传输的时候会有跨域访问的情况，因此需要到阿里云oss管理，添加跨域规则。

警告

authorization 这一项不可省略，严格按照截图所示配置，替换成自己的域名即可

获得签名参数

前端是采用签名直传的方式，上传不经过服务端，文件直接从前端上传到OSS，因此我们调用上传接口会获得一些签名所需的参数，然后再上传文件

src/modules/demo/controller/app/file.ts

import { Get, Inject, Post, Provide } from '@midwayjs/decorator';
import { CoolController, BaseController } from '@cool-midway/core';
import { Context } from 'koa';
import { CoolFile } from '@cool-midway/file';

/**
 * 文件上传
 */
@Provide()
@CoolController()
export class AppDemoFileController extends BaseController {
  @Inject()
  ctx: Context;

  @Inject()
  file: CoolFile;

  @Post('/upload', { summary: '文件上传' })
  async uplod() {
    return this.ok(await this.file.upload(this.ctx));
  }
}

腾讯云cos

配置方式参考阿里云oss

...

七牛云qiniu

配置方式参考阿里云oss

...

下载并上传到云存储

有时候我们需要下载文件并上传到云存储，如：微信授权登录的时候获得的微信头像链接是会失效的，我们需要下载并保存。

src/modules/demo/controller/app/file.ts

import { Get, Inject, Post, Provide } from '@midwayjs/decorator';
import { CoolController, BaseController } from '@cool-midway/core';
import { Context } from 'koa';
import { CoolFile } from '@cool-midway/file';

/**
* 文件上传
*/
@Provide()
@CoolController()
export class AppDemoFileController extends BaseController {
 @Inject()
 ctx: Context;

 @Inject()
 file: CoolFile;

 @Post('/downAndUpload', { summary: '下载并上传' })
 async downAndUpload() {
   return this.ok(
     await this.file.downAndUpload('https://cool-js.com/notice.png')
   );
 }
}

提示

微信授权登录保存图片，建议做成异步下载，下载完成后再更新用户信息。

Last Updated: