依赖
formidable
代码
前端
<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>
Node
'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 上传文件获取参数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！