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 相关文章推荐
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
vue实现商城购物车功能
Nov 27 Javascript
Angular 数据请求的实现方法
May 07 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
关于element的表单组件整理笔记
Feb 05 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常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
党员思想汇报范文
2013/12/30 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
平面设计求职信
2014/03/10 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Python函数式编程中itertools模块详解
2021/09/15 Python
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技