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最简单的拖拽效果实现代码
Sep 24 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php给图片加文字水印
2015/07/31 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Python中的元类编程入门指引
2015/04/15 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python中的字典操作及字典函数
2018/01/03 Python
Python检测网络延迟的代码
2018/05/15 Python
Python中的集合介绍
2019/01/28 Python
python批量下载抖音视频
2019/06/17 Python
Python __slots__的使用方法
2020/11/15 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
优秀教师事迹材料
2014/12/15 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书