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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
js中call与apply的用法小结
Dec 28 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
webpack3之loader全解析
Oct 26 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 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/06/18 PHP
PHP生成压缩文件实例
2015/02/07 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
应届毕业生的个人自我鉴定
2013/10/24 职场文书
大学生学习生活的自我评价
2013/11/01 职场文书
合伙协议书范本
2014/04/21 职场文书
同居协议书范本
2014/04/23 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书