Egg.js 中 AJax 上傳文件獲取參數(shù)的方法
更新時間:2018年10月10日 11:03:05 作者:公旦
這篇文章主要介紹了Egg.js 中 AJax 上傳文件獲取參數(shù),需要的朋友可以參考下
依賴
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;
總結(jié)
以上所述是小編給大家介紹的Egg.js 中 AJax 上傳文件獲取參數(shù),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
用JavaScript實現(xiàn) 鐵甲無敵獎門人 “開口中”猜數(shù)游戲
JavaScript在常人看來都是門出不了廳堂的小語言,僅管它沒有明星語言的閃耀,但至少網(wǎng)頁的閃耀還是需要它的,同時它是一門很實用的語言。2009-10-10
JS加jquery簡單實現(xiàn)標(biāo)簽元素的顯示或隱藏
標(biāo)簽元素的顯示或隱藏在使用中還是挺頻繁的,下面有個不錯的示例,大家可以參考下,或許有所幫助2013-09-09
TensorFlow.js機器學(xué)習(xí)預(yù)測鳶尾花種類
TensorFlow.js是一個開源的基于硬件加速的JavaScript庫,用于訓(xùn)練和部署機器學(xué)習(xí)模型。本教程將會帶大家簡單了解和使用TensorFlow.js框架實現(xiàn)預(yù)測鳶尾花種類2022-11-11
JavaScript實現(xiàn)簡單版的留言發(fā)布與刪除
這篇文章主要介紹了如何通過JavaScript實現(xiàn)簡單的留言板功能:留言的發(fā)布與刪除。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03
JavaScript中使用構(gòu)造器創(chuàng)建對象無需new的情況說明
JS中創(chuàng)建對象可以直接使用直接量的方式,這里討論的是定義一個構(gòu)造器(function)的情況2012-03-03

