依存関係をインストールする
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;
構成情報の流れ
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,
};
};
卵がアップロードされたファイル ストリームを取得したことがわかります。
アップロード ファイルの種類の変更
構成情報ファイル
multipart: {
mode: 'file',
whitelist: [ '.txt', '.css', '.xml' ],
fileSize: '50mb',
},
const file = ctx.request.files;
