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

 更新时间:2018年10月10日 11:03:05   作者:公旦  
这篇文章主要介绍了Egg.js 中 AJax 上传文件获取参数,需要的朋友可以参考下

依赖

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

相关文章

  • 利用javascript的面向对象的特性实现限制试用期

    利用javascript的面向对象的特性实现限制试用期

    Javascript是一种面向对象的脚本语言,其也具有面向对象的三大特性,但是今天我们不详细的讲解javascript的面向对象特性,今天我们简单的了解一下javascript的面向对象特性,然后学习一下怎样实现试用期的限制!
    2011-08-08
  • Electron实现多标签页模式详解

    Electron实现多标签页模式详解

    Electron 都发展这么多年了,让人想不到的是,要实现一个多标签页的功能居然没有能用的轮子,本文就来用比较low的方案 - iframe手搓一个吧
    2024-11-11
  • xml 封装与解析(javascript和C#中)

    xml 封装与解析(javascript和C#中)

    xml 封装与解析 javascript和C#中的分别实现代码。
    2009-07-07
  • JS实现两表格里数据来回转移的方法

    JS实现两表格里数据来回转移的方法

    这篇文章主要介绍了JS实现两表格里数据来回转移的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • js面试题之异步问题的深入理解

    js面试题之异步问题的深入理解

    这篇文章主要给大家介绍了关于js面试题之异步问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • JavaScript判断页面是否滚动到底部的技巧

    JavaScript判断页面是否滚动到底部的技巧

    在 JavaScript 中,我们可以通过一些技巧来判断页面是否滚动到底部,本文将介绍一些常用的方法,帮助你在项目中实现这一功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • JavaScript中数组flat方法的使用与实现方法

    JavaScript中数组flat方法的使用与实现方法

    在Array的显示原型下有一个flat方法,可以将多维数组,降维,传的参数是多少就降多少维,下面这篇文章主要给大家介绍了关于JavaScript中数组flat方法的使用与实现的相关资料,需要的朋友可以参考下
    2022-08-08
  • 小程序实现搜索框

    小程序实现搜索框

    搜索框无论是在电商网站还是小程序中都很常见,这篇文章主要就为大家详细介绍了小程序如何实现搜索框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 小程序实现录音功能

    小程序实现录音功能

    这篇文章主要为大家详细介绍了小程序实现录音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Javascript下的urlencode编码解码方法附decodeURIComponent

    Javascript下的urlencode编码解码方法附decodeURIComponent

    而本文,就大概说说如何在js中通过系统自带的函数去解决这个问题。
    2010-04-04

最新评论