最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

Egg.js 中 AJax 上传文件获取参数的方法

来源:动视网 责编:小采 时间:2020-11-27 22:06:16
文档

Egg.js 中 AJax 上传文件获取参数的方法

Egg.js 中 AJax 上传文件获取参数的方法:依赖 formidable 代码 前端 <fieldset style=margin: 20px; padding: 20px;> <legend>单文件,Ajax</legend> <form id=form3> <div> <input type=text id=
推荐度:
导读Egg.js 中 AJax 上传文件获取参数的方法:依赖 formidable 代码 前端 <fieldset style=margin: 20px; padding: 20px;> <legend>单文件,Ajax</legend> <form id=form3> <div> <input type=text id=


依赖

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 上传文件获取参数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

文档

Egg.js 中 AJax 上传文件获取参数的方法

Egg.js 中 AJax 上传文件获取参数的方法:依赖 formidable 代码 前端 <fieldset style=margin: 20px; padding: 20px;> <legend>单文件,Ajax</legend> <form id=form3> <div> <input type=text id=
推荐度:
标签: ajax egg.js 中ajax
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top