本文介绍在 Egg.js 框架中如何利用 Ajax 异步上传文件并获取相关参数。前端通过 FormData 对象封装单文件或多文件请求，后端使用 formidable 中间件解析流数据，支持自定义文件名及多文件处理，确保文件存储路径正确生成并返回结果。
Egg.js Ajax文件上传实现
实现该功能需要引入 formidable 依赖库。
formidable
后端控制器代码示例展示了如何初始化表单解析器。
前端 HTML 结构包含用于单文件和多文件上传的表单元素，分别对应 form3 和 form4 两个表单 ID。
<fieldset style="margin: 20px; padding: 20px;">
<legend>单文件，Ajax</legend>
<form id="form3">
<div>
<input type="text" id="customName" placeholder="自定义文件名" />
</div>
<div>
<input type="file" class="file" />
</div>
<div>
<input type="submit" value="上传">
</div>
</form>
</fieldset>
<fieldset style="margin: 20px; padding: 20px;">
<legend>多文件，Ajax</legend>
<form id="form4">
<div>
<input type="file" class="file" multiple />
</div>
<div>
<input type="submit" value="上传" />
</div>
</form>
</fieldset>
<script>
$(function () {
const _csrf = "{{ ctx.csrf | safe }}";
$('form').submit(function (e) {
e.preventDefault();
const formData = new FormData();
const fileList = $(this).find('.file')[0].files;
let index = 0;
for (let key of fileList) {
formData.append('file' + index, key);
index++
}
formData.append('isAjax', 'yes');
formData.append('customName', $(this).find('#customName').val() || '');
$.ajax({
url: '/admin/file/upload?_csrf=' + _csrf,
data: formData,
method: 'POST',
contentType: false,
processData: false,
success: function (result) {
},
error: function (responseStr) {
alert("error", responseStr);
}
});
});
});
</script>
前端 JavaScript 代码负责构造 FormData 对象，配置 Ajax 请求参数如 contentType 和 processData 为 false，并处理成功与失败的回调函数。
'use strict';
const fs = require('fs');
const path = require('path');
const awaitWriteStream = require('await-stream-ready').write;
const sendToWormhole = require('stream-wormhole');
const formidable = require("formidable");
const Controller = require('../../core/base_controller');
class FileController extends Controller {
async parse(req) {
const form = new formidable.IncomingForm();
return new Promise((resolve, reject) => {
form.parse(req, (err, fields, files) => {
resolve({ fields, files })
})
});
}
/**
* 上传文件，兼容单文件和多文件
* @param customName 单文件自定义文件名
* @param isAjax 上传方式
*/
async upload() {
const { ctx, logger } = this;
const extraParams = await this.parse(ctx.req);
let { multipleFile, customName, isAjax } = extraParams && extraParams['fields'];
logger.info(multipleFile, customName, isAjax);
if (isAjax === 'yes') {
const urls = [];
for (let key in extraParams.files) {
const file = extraParams.files[key];
logger.info('file.name', file.name);
logger.info('customName', customName);
const stream = fs.createReadStream(file.path);
const fileName = customName ? (customName + path.extname(file.name)) : file.name;
const target = path.join(this.config.baseDir, 'app/public/upload', fileName);
const writeStream = fs.createWriteStream(target);
try {
await awaitWriteStream(stream.pipe(writeStream));
} catch (err) {
await sendToWormhole(stream);
throw err;
}
urls.push(target);
}
this.success({ urls })
}
}
}
module.exports = FileController;通过上述配置，可以完成文件的异步上传操作。
希望本文介绍的 Egg.js 中通过 Ajax 上传文件并获取参数的方法能对您有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！