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 相关文章推荐
JavaScript中的acos()方法使用详解
Jun 14 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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程序
2006/10/09 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
加强版phplib的DB类
2008/03/31 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
python flask实现分页效果
2017/06/27 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
举例讲解Python常用模块
2019/03/08 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
迟到检讨书800字
2014/01/13 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2015年端午节活动方案
2015/05/05 职场文书
小学主题班会教案
2015/08/17 职场文书
2016年入党心得体会范文
2016/01/23 职场文书