依赖
formidable
代码
前端
<fieldset xss=removed>
<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
在Egg.js中，使用AJAX上传文件并获取参数的过程涉及到多个关键步骤和技术。前端需要使用HTML和JavaScript来构建文件上传表单，并通过AJAX实现异步提交。然后，后端使用Node.js和Egg.js框架处理上传请求，解析上传的文件和额外参数。
前端部分：
1. HTML表单：创建一个`<form>`元素，包含一个用于输入文件的`<input type="file">`字段。如果允许上传多个文件，可以设置`multiple`属性。另外，可以添加一个自定义文本框（`<input type="text">`）用于用户指定文件名。
```html
<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>
```
2. JavaScript处理：使用jQuery监听表单的提交事件，并阻止其默认行为。创建一个新的`FormData`对象，将文件和自定义参数（如`customName`）添加到其中。使用`$.ajax`发送POST请求，设置`contentType`为`false`和`processData`为`false`以防止jQuery对数据进行处理。
```javascript
$(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);
},
});
});
});
```
后端部分：
1. Node.js依赖：引入`formidable`库，它是一个强大的处理HTTP上传文件的模块。同时，需要`fs`和`path`库来操作文件系统，以及`awaitWriteStream`和`stream-wormhole`库处理流操作。
```javascript
const formidable = require("formidable");
const Controller = require('../../core/base_controller');
```
2. 创建`FileController`类，继承自Egg.js的`Controller`类，定义解析请求的`parse`方法。这个方法会创建一个`IncomingForm`实例并返回一个Promise，解析请求中的字段和文件。
```javascript
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 });
});
});
}
}
```
3. 实现`upload`方法，接收上传的文件。从解析结果中提取`customName`、`isAjax`和其他额外参数。检查`isAjax`标志以确认请求是通过AJAX发送的，然后处理每个上传的文件。
```javascript
async upload() {
const { ctx, logger } = this;
const extraParams = await this.parse(ctx.req);
let { multipleFile, customName, isAjax } = extraParams && extraParams.fields;
if (isAjax === 'yes') {
// 处理文件上传逻辑
}
// 其他后端处理...
}
```
在实际应用中，你需要在`upload`方法内处理上传的文件，例如保存文件到服务器的特定目录，或者使用云存储服务。你可以遍历`extraParams.files`对象，读取每个文件的信息，然后使用`fs`库写入文件系统，或者使用第三方库如`multer`来简化文件处理流程。
Egg.js中AJAX上传文件并获取参数的过程涉及前端的表单构建、数据封装，以及后端的文件解析和处理。这个过程需要前后端紧密配合，确保文件上传的顺利进行。
