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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
js实现tab栏切换效果
Aug 02 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
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
汇智创新科技发展有限公司
2015/12/06 面试题
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
初中生学习的自我评价
2013/11/14 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
同事吵架检讨书
2014/02/05 职场文书
自荐信的基本格式
2014/02/22 职场文书
节约用水的口号
2014/06/20 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
实习推荐信格式模板
2015/03/27 职场文书
初三数学教学反思
2016/02/17 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL