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


Posted in Javascript onOctober 10, 2018

依赖

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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 #Javascript
解决eclipse中没有js代码提示的问题
Oct 10 #Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 #Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 #Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
Vue 重置组件到初始状态的方法示例
Oct 10 #Javascript
15个顶级开源JavaScript框架和库
Oct 10 #Javascript
You might like
第十二节 类的自动加载 [12]
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php短信接口代码
2016/05/13 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
Javascript缓存API
2016/06/14 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
python deque模块简单使用代码实例
2020/03/12 Python
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
需求分析说明书
2014/05/09 职场文书
领导班子四风表现材料
2014/08/23 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android