egg3.0项目渲染模板中上传文件_egg-bin 6 cluster-CSDN博客

本文链接：https://blog.csdn.net/weixin_40119412/article/details/130393877

安装依赖

npm install egg-multipart

  "dependencies": {
    "egg": "^3",
    "egg-mongoose": "^3.3.1",
    "egg-multipart": "^3.3.0",
    "egg-scripts": "^2",
    "egg-view-nunjucks": "^2.3.0"
  },
  "devDependencies": {
    "egg-bin": "^5",
    "egg-ci": "^2",
    "egg-mock": "^5",
    "eslint": "^8",
    "eslint-config-egg": "^12"
  },

app\view\role.tpl

<html>

<head>
  <title>Role Test</title>
  <link rel="stylesheet" href="/public/css/global.css" />
  <link rel="stylesheet" href="/public/css/role.css" />
</head>

<body>

  <ul class="role-view view" id="role-box">
    {% for item in list %}
    <li class="item" data-item="{{item}}">
      {{ item.name }}
    </li>
    {% endfor %}
  </ul>
  <p>上传文件</p>
  <form  method="POST" action="/file/url" enctype="multipart/form-data" id="form" target="_blank">

    <input type="file" name="file" id="content" />
    <button type="submit" id="upload">提交</button>

  </form>

</body>

</html>

app\controller\file.js

'use strict';

const {
  Controller,
} = require('egg');

class FileController extends Controller {

  // 生成url
  async createUrl() {
    const {
      ctx,
    } = this;
    try {
      const stream = await ctx?.getFileStream();
      console.log('stream', stream);
    } catch (err) {
      console.log(err);
    }

    // console.log('parts', parts);
    ctx.body = {
      code: 0,
      data: {
        url: '',
      },
    };
  }
}

module.exports = FileController;

配置信息stream

    multipart: {
      mode: 'stream',
      whitelist: [ '.txt', '.css', '.xml' ],
      fileSize: '50mb',
    },
    bodyParser: {
      jsonLimit: '1mb',
      formLimit: '1mb',
    },

config\config.default.js

'use strict';

/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {
    // 支持post请求
    security: {
      csrf: {
        enable: false,
      },
    },
    cluster: {
      listen: {
        port: 55555,
        hostname: '127.0.0.1', // 不建议设置 hostname 为 '0.0.0.0'，它将允许来自外部网络和来源的连接，请在知晓风险的情况下使用
      },
    },
    mongoose: {
      client: {
        // 链接到本地的MongoDB，note是我本地数据库的名字
        url: 'mongodb://127.0.0.1:27017/note',
        options: {
          // dbName: 'note',
          // useNewUrlParser: true,
          useUnifiedTopology: true,
        },
      },
    },
    view: {
      defaultViewEngine: 'nunjucks',
      mapping: {
        '.tpl': 'nunjucks',
      },
    },
    multipart: {
      mode: 'stream',
      whitelist: [ '.txt', '.css', '.xml' ],
      fileSize: '50mb',
    },
    bodyParser: {
      jsonLimit: '1mb',
      formLimit: '1mb',
    },
  };

  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1682063943419_2410';

  // add your middleware config here
  config.middleware = [];

  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };

  return {
    ...config,
    ...userConfig,
  };
};

在这里插入图片描述
可以看到egg获取了上传的文件流.

上传文件类型修改

配置信息file

    multipart: {
      mode: 'file',
      whitelist: [ '.txt', '.css', '.xml' ],
      fileSize: '50mb',
    },

 const file = ctx.request.files;

在这里插入图片描述