@eggjs/多块
使用 公交车 通过流媒体上传文件
处理它而不保存到磁盘(使用 stream 模式).
刚刚使用 ctx.multipart() ,然后传递到图像处理模块,例如 gm 或上传到云存储等 oss。 。 。 .
文件扩展名的白名单
对于安全性,如果上传的文件扩展名不在白名单中,则会以 400 Bad request。 。 。 .
默认白名单 :
const whitelist = [
// images
'.jpg',
'.jpeg', // image/jpeg
'.png', // image/png, image/x-png
'.gif', // image/gif
'.bmp', // image/bmp
'.wbmp', // image/vnd.wap.wbmp
'.webp',
'.tif',
'.psd',
// text
'.svg',
'.js',
'.jsx',
'.json',
'.css',
'.less',
'.html',
'.htm',
'.xml',
// tar
'.zip',
'.gz',
'.tgz',
'.gzip',
// video
'.mp3',
'.mp4',
'.avi',
];
文件大小
默认文件大小 10mb。如果上传一个大文件,请指定此配置.
// config/config.default.js
exports.multipart = {
fileSize: '50mb',
};
自定义配置
开发者可以自定义额外的文件扩展名 :
// config/config.default.js
exports.multipart = {
// will append to whilelist
fileExtensions: ['.foo', '.apk'],
};
还可以 覆盖 内置白名单, 如只允许 png :
// config/config.default.js
exports.multipart = {
whitelist: ['.png'],
};
或按函数:
exports.multipart = {
whitelist: (filename) => ['.png'].includes(path.extname(filename) || ''),
};
注:如果定义 whitelist,则 fileExtensions 将被忽略.
实例
更多例子如下:
file 模式: 简单的方式
如果你不知道的话 节点.js流 劳动,
也许你应该用 file 模式开始.
用途与 车体处理器。 。 。 .
ctx.request.body: 获取所有多块字段和值, 但file。 。 。 .ctx.request.files: 包含全部file从多段请求,它是一个矩阵对象.
警告:使用后, 您应该删除临时上传文件, (中文(简体) ),
页:1 async ctx.cleanupRequestFiles() 方法将非常有用.
启用 file 配置模式
你需要设定 config.multipart.mode = 'file' 启用 file 模式 :
// config/config.default.js
exports.multipart = {
mode: 'file',
};
之后 file 模式启用, egg 将删除旧的临时文件( 不包括今天的文件) 04:30 AM 每天默认.
config.multipart = {
mode: 'file',
tmpdir: path.join(os.tmpdir(), 'egg-multipart-tmp', appInfo.name),
cleanSchedule: {
// run tmpdir clean job on every day 04:30 am
// cron style see https://github.com/eggjs/egg-schedule#cron-style-scheduling
cron: '0 30 4 * * *',
disable: false,
},
};
默认将使用最后一个同名字段, 如果需要所有字段值, 请设置 allowArrayField 在配置中.
// config/config.default.js
exports.multipart = {
mode: 'file',
allowArrayField: true,
};
上传一个文件
<form method="POST" action="/upload?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data">
title: <input name="title" /> file: <input name="file" type="file" />
<button type="submit">Upload</button>
</form>
自动控制器 POST /upload数字 :
// app/controller/upload.js
const Controller = require('egg').Controller;
const fs = require('mz/fs');
module.exports = class extends Controller {
async upload() {
const { ctx } = this;
const file = ctx.request.files[0];
const name = 'egg-multipart-test/' + path.basename(file.filename);
let result;
try {
// process file or upload to cloud storage
result = await ctx.oss.put(name, file.filepath);
} finally {
// remove tmp files and don't block the request's response
// cleanupRequestFiles won't throw error even remove file io error happen
ctx.cleanupRequestFiles();
// remove tmp files before send response
// await ctx.cleanupRequestFiles();
}
ctx.body = {
url: result.url,
// get all field values
requestBody: ctx.request.body,
};
}
};
上传多文件
<form method="POST" action="/upload?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data">
title: <input name="title" /> file1: <input name="file1" type="file" /> file2: <input name="file2" type="file" />
<button type="submit">Upload</button>
</form>
自动控制器 POST /upload数字 :
// app/controller/upload.js
const Controller = require('egg').Controller;
const fs = require('mz/fs');
module.exports = class extends Controller {
async upload() {
const { ctx } = this;
console.log(ctx.request.body);
console.log('got %d files', ctx.request.files.length);
for (const file of ctx.request.files) {
console.log('field: ' + file.fieldname);
console.log('filename: ' + file.filename);
console.log('encoding: ' + file.encoding);
console.log('mime: ' + file.mime);
console.log('tmp filepath: ' + file.filepath);
let result;
try {
// process file or upload to cloud storage
result = await ctx.oss.put('egg-multipart-test/' + file.filename, file.filepath);
} finally {
// remove tmp files and don't block the request's response
// cleanupRequestFiles won't throw error even remove file io error happen
ctx.cleanupRequestFiles([file]);
}
console.log(result);
}
}
};
stream 模式: 困难方式
如果你熟知节点 Js Stream的作品 你应该用 stream 模式.
使用方式 for await...of
<form method="POST" action="/upload?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data">
title: <input name="title" /> file1: <input name="file1" type="file" /> file2: <input name="file2" type="file" />
<button type="submit">Upload</button>
</form>
自动控制器 POST /upload数字 :
// app/controller/upload.js
const { Controller } = require('egg');
const fs = require('fs');
const stream = require('stream');
const util = require('util');
const { randomUUID } = require('crypto');
const pipeline = util.promisify(stream.pipeline);
module.exports = class UploadController extends Controller {
async upload() {
const parts = this.ctx.multipart();
const fields = {};
const files = {};
for await (const part of parts) {
if (Array.isArray(part)) {
// fields
console.log('field: ' + part[0]);
console.log('value: ' + part[1]);
} else {
// otherwise, it's a stream
const { filename, fieldname, encoding, mime } = part;
console.log('field: ' + fieldname);
console.log('filename: ' + filename);
console.log('encoding: ' + encoding);
console.log('mime: ' + mime);
// how to handler?
// 1. save to tmpdir with pipeline
// 2. or send to oss
// 3. or just consume it with another for await
// WARNING: You should almost never use the origin filename as it could contain malicious input.
const targetPath = path.join(os.tmpdir(), randomUUID() + path.extname(filename));
await pipeline(part, createWriteStream(targetPath)); // use `pipeline` not `pipe`
}
}
this.ctx.body = 'ok';
}
};
上传一个文件( DEPRECATED)
您可以通过上传流 ctx.getFileStream*()。 。 。 .
<form method="POST" action="/upload?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data">
title: <input name="title" /> file: <input name="file" type="file" />
<button type="submit">Upload</button>
</form>
处理器控制器 POST /upload数字 :
// app/controller/upload.js
const path = require('node:path');
const { sendToWormhole } = require('stream-wormhole');
const { Controller } = require('egg');
module.exports = class extends Controller {
async upload() {
const { ctx } = this;
// file not exists will response 400 error
const stream = await ctx.getFileStream();
const name = 'egg-multipart-test/' + path.basename(stream.filename);
// process file or upload to cloud storage
const result = await ctx.oss.put(name, stream);
ctx.body = {
url: result.url,
// process form fields by `stream.fields`
fields: stream.fields,
};
}
async uploadNotRequiredFile() {
const { ctx } = this;
// file not required
const stream = await ctx.getFileStream({ requireFile: false });
let result;
if (stream.filename) {
const name = 'egg-multipart-test/' + path.basename(stream.filename);
// process file or upload to cloud storage
const result = await ctx.oss.put(name, stream);
} else {
// must consume the empty stream
await sendToWormhole(stream);
}
ctx.body = {
url: result && result.url,
// process form fields by `stream.fields`
fields: stream.fields,
};
}
};
上传多文件( DEPRECATED)
<form method="POST" action="/upload?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data">
title: <input name="title" /> file1: <input name="file1" type="file" /> file2: <input name="file2" type="file" />
<button type="submit">Upload</button>
</form>
自动控制器 POST /upload数字 :
// app/controller/upload.js
const Controller = require('egg').Controller;
module.exports = class extends Controller {
async upload() {
const { ctx } = this;
const parts = ctx.multipart();
let part;
while ((part = await parts()) != null) {
if (part.length) {
// arrays are busboy fields
console.log('field: ' + part[0]);
console.log('value: ' + part[1]);
console.log('valueTruncated: ' + part[2]);
console.log('fieldnameTruncated: ' + part[3]);
} else {
if (!part.filename) {
// user click `upload` before choose a file,
// `part` will be file stream, but `part.filename` is empty
// must handler this, such as log error.
continue;
}
// otherwise, it's a stream
console.log('field: ' + part.fieldname);
console.log('filename: ' + part.filename);
console.log('encoding: ' + part.encoding);
console.log('mime: ' + part.mime);
const result = await ctx.oss.put('egg-multipart-test/' + part.filename, part);
console.log(result);
}
}
console.log('and we are done parsing the form!');
}
};
支助 file 财务报告和审定财务报表 stream 模式在同一时间
如果默认 mode 实值 stream,使用 fileModeMatch 选项以匹配请求 urls 切换到 file 模式.
config.multipart = {
mode: 'stream',
// let POST /upload_file request use the file mode, other requests use the stream mode.
fileModeMatch: /^\/upload_file$/,
// or glob
// fileModeMatch: '/upload_file',
};
注意点: fileModeMatch 选项 stream 模式.
许可证
贡献者
制造的 贡献者-img。 。 。 .