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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liqianglai/article/details/79070921

依赖

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;