midwayjs上传文件_midwaysjs上传配置_上传问题处理
2024-11-23 14:48:52
本篇文章介绍了使用midwaysjs上传的基本配置与遇到的问题
1070

一、正常安装上传依赖

npm i @midwayjs/upload@3 --save

二、启用组件

import { Configuration } from '@midwayjs/core';
import * as upload from '@midwayjs/upload';
@Configuration({
  imports: [
    // ...other components
    upload
  ],
  // ...
})
export class MainConfiguration {}

三、新增配置

// src/config/config.default.ts
import { uploadWhiteList } from '@midwayjs/upload';
import { tmpdir } from 'os';
import { join } from 'path';

export default {
  // ...
  upload: {
    // mode: UploadMode, 默认为file，即上传到服务器临时目录，可以配置为 stream
    mode: 'file',
    // fileSize: string, 最大上传文件大小，默认为 10mb
    fileSize: '10mb',
    // whitelist: string[]，文件扩展名白名单
    whitelist: uploadWhiteList.filter(ext => ext !== '.pdf'),
    // tmpdir: string，上传的文件临时存储路径
    tmpdir: join(tmpdir(), 'midway-upload-files'),
    // cleanTimeout: number，上传的文件在临时目录中多久之后自动删除，默认为 5 分钟
    cleanTimeout: 5 * 60 * 1000,
    // base64: boolean，设置原始body是否是base64格式，默认为false，一般用于腾讯云的兼容
    base64: false,
    // 仅在匹配路径到 /api/upload 的时候去解析 body 中的文件信息
    match: //api/upload/,
  },
}

四、获取上传的文件

没有swagger组件：

import { Controller, Inject, Post, Files, Fields } from '@midwayjs/core';

@Controller('/')
export class HomeController {

  @Inject()
  ctx;

  @Post('/upload')
  async upload(@Files() files, @Fields() fields) {
    /*
    files = [
      {
        filename: 'test.pdf',        // 文件原名
        data: '/var/tmp/xxx.pdf',    // mode 为 file 时为服务器临时文件地址
        fieldname: 'test1',          // 表单 field 名
        mimeType: 'application/pdf', // mime
      },
      {
        filename: 'test.pdf',        // 文件原名
        data: ReadStream,    // mode 为 stream 时为服务器临时文件地址
        fieldname: 'test2',          // 表单 field 名
        mimeType: 'application/pdf', // mime
      },
      // ...file 下支持同时上传多个文件
    ]

    */
    return {
      files,
      fields
    }
  }
}

使用swagger组件：（其中额外属性在fields中）

 //dto文件
 export class FileDto extends MockDto {
  @ApiProperty({
    type: 'string',
    format: 'binary',
    description: '文件',
  })
  files: any;
  @Rule(RuleType.string())
  @ApiProperty({ example: 'example', description: '文件的fileMD5' })
  fileMD5: string;

}
//serve文件
import { FileDto} from './dto';
 import { ApiQuery, ApiOperation, ApiBody, BodyContentType } from '@midwayjs/swagger';
  import { Post, Body, Files, Fields} from '@midwayjs/decorator';
  @ApiOperation({ summary: '上传文件' })
  @Post('/upload/file')
  //使用Validate(),并在参数中使用dto
  @Validate()
  @ApiBody({
    contentType: BodyContentType.Multipart
  })
  async upploadFile(@Body() params: FileDto, @Files() files, @Fields() fields) {
    let url = await this.commonService.uploadFile(files, fields.md5);
    return {
      success: true,
      message: this.i18nService.translate('returnSuccess'),
      data: {
        ...url,
      },
    };
  }

常见问题：

  1. 在vue-cli中与 开发环境不会有问题，在生产环境中会遇到****.upload.addEventListener is not a function

vue-cli中的mockjs模块把XMLHttpRequest覆盖拦截了，会导致对象属性访问不到，所以把mokejs卸载删除。

最新文章