Egg.js 中 AJax 上传文件获取参数的方法

所属分类: 网络编程 / JavaScript 阅读数: 1098
收藏 0 赞 0 分享

依赖

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 上传文件获取参数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

AngularJs IE Compatibility 兼容老版本IE

本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

AngularJs Modules详解及示例代码

本文主要介绍AngularJs Modules的相关知识,这里整理了详细的资料及简单示例代码,有兴趣的朋友可以参考下
收藏 0 赞 0 分享

AngularJs Scope详解及示例代码

本文主要介绍AngularJs Scope的知识,这里整理了详细资料及示例代码,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

node.js中module.exports与exports用法上的区别

Node.js 引入了模块(Module)概念,一个模块可以通过module.exports 或 exports 将函数、变量等导出,以使其它 JavaScript 脚本通过require() 函数引入并使用。那么node.js中module.exports与exports有什么
收藏 0 赞 0 分享

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

最近做了一个项目,其中有需求要求实现发送短信验证码后倒计时功能,其中有个难点:要求关闭页面也进行倒计时。好吧,下面小编把jquery 发送验证码倒计时的实现代码分享给大家,大家可以参考下
收藏 0 赞 0 分享

js绘制购物车抛物线动画

这篇文章主要为大家详细介绍了js绘制购物车抛物线动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

vue.js入门教程之绑定class和style样式

小编之前介绍了通过vue.js计算属性,不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式,有需要的朋友们可以参考借鉴。
收藏 0 赞 0 分享

纯JS实现可拖拽表单的简单实例

下面小编就为大家带来一篇纯JS实现可拖拽表单的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js实现StringBuffer的简单实例

下面小编就为大家带来一篇js实现StringBuffer的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多