# 本地上传

本地文件上传基于midwayjs的文件上传 (opens new window),点击了解详情。

# 上传目录

上传目录放在静态资源中的uploads文件夹 src/config/config.default.ts

 // 靜態目錄及緩存設置
  config.static = {
    prefix: '',
    dir: path.join(appInfo.baseDir, '..', 'public'),
    dynamic: true,
    preload: false,
    // maxAge: 31536000,
    maxAge: 0,
    buffer: false,
  };

# 编写上传接口

import { Provide, Inject, Get, Post, Body, ALL } from '@midwayjs/decorator';
import { Context } from 'egg';
import { CoolController, BaseController, ICoolFile } from 'midwayjs-cool-core';
import { BaseSysUserEntity } from '../../entity/sys/user';
import { BaseSysLoginService } from '../../service/sys/login';
import { BaseSysPermsService } from '../../service/sys/perms';
import { BaseSysUserService } from '../../service/sys/user';

/**
 * Base 通用接口 一般写不需要权限过滤的接口
 */
@Provide()
@CoolController()
export class BaseCommController extends BaseController {
  // 注入缓存实例,该缓存实例是midwayjs-cool-core组件提供的,注入它需要加命名空间前缀
  @Inject('cool:file')
  coolFile: ICoolFile;

  /**
   * 文件上传
   */
  @Post('/upload')
  async upload() {
    return this.ok(await this.coolFile.upload(this.ctx));
  }

  /**
   * 文件上传模式,本地或者云存储 local、oss等
   */
  @Get('/uploadMode')
  async uploadMode() {
    return this.ok(this.coolFile.getMode());
  }
}

# 修改配置

修改 /src/config/config.default.ts 配置文件中的可访问文件根域名

config.cool = {
    // 文件上传
    file: {
        // 文件路径前缀 本地上传模式下 有效
        domain: 'https://admin.cool-js.cool',
    },
};

# ICoolCache

方法 方法参数 说明
upload ctx(请求上下文) 上传,oss模式下会返回签名信息
getMode 获得上传模式,local(本地上传)、oss(阿里云oss上传)
getMetaFileObj 获得原生的操作实例,如果是阿里云的则是ali-oss (opens new window), 更多复杂的功能

前端通过表单的方式提交, 当然你如果用cool-admin的前端,有对应的上传组件cl-upload

<form method="POST" action="url" enctype="multipart/form-data">
  title: <input name="title" />
  file: <input name="file" type="file" />
  <button type="submit">Upload</button>
</form>

TIP

本地上传的文件会保存在,后端/public/uploads/文件夹下

# 切换上传(oss)

当前云存储盛行的情况下,大多数用户会把图片、文件等静态资源保存在云存储。

cool官方也提供了oss插件midwayjs-cool-oss (opens new window), 基于ali-oss (opens new window)阿里云oss文档 (opens new window)阿里云oss图片处理文档 (opens new window)提供了强大的图片处理功能。

yarn add midwayjs-cool-oss

src/configuration.ts 中引入组件

import { App, Configuration } from '@midwayjs/decorator';
import { ILifeCycle, IMidwayContainer } from '@midwayjs/core';
import { Application } from 'egg';
import * as orm from '@midwayjs/orm';
import * as cool from 'midwayjs-cool-core';
import * as wxpay from 'midwayjs-cool-wxpay';
import * as oss from 'midwayjs-cool-oss';
import * as redis from 'midwayjs-cool-redis';
import * as queue from 'midwayjs-cool-queue';
import * as alipay from 'midwayjs-cool-alipay';
//import * as socket from 'midwayjs-cool-socket';

@Configuration({
  // 注意组件顺序 cool 有依赖orm组件, 所以必须放在,orm组件之后 cool的其他组件必须放在cool 核心组件之后
  imports: [
    // 必须,不可移除, https://typeorm.io  打不开? https://typeorm.biunav.com/zh/
    orm,
    // 必须,不可移除, cool-admin 官方组件 https://www.cool-js.com
    cool,
    // oss插件,需要到后台配置之后才有用,默认是本地上传
    oss,
    // 将缓存替换成redis
    redis,
    // 队列
    queue,
    // 微信支付
    wxpay,
    // 支付宝支付
    alipay,
    // socket
    //socket
  ],
})
export class ContainerLifeCycle implements ILifeCycle {
  @App()
  app: Application;
  // 应用启动完成
  async onReady(container?: IMidwayContainer) {
  }
  // 应用停止
  async onStop() {}
}

配置完之后登录后台管理系统,插件管理-插件列表,修改oss的配置。cool-admin前端无需修改,会跟随着后台的设置切换成oss上传

# OSS跨域配置

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

当然你的访问地址也可以是http://127.0.0.1:9000或者http://localhost:9000,只是示例,修改成自己实际的访问地址

WARNING

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

TIP

oss文件上传有多种模式,cool-admin 提供的是最高效的签名上传,该上传模式文件数据流不会经过我们自己的服务,而是直接上传到云存储。这样不会占用服务带宽,大大提高上传速度,而且不会影响到服务器。

当然除了oss,后续还有支持更多上传模式,比如七牛、腾讯云存储等。希望广大cool-admin使用者,自身刚好有这块需求,可以写成一个插件,供其他人使用。