一文搞懂eggjs中上传文件

栏目: JavaScript · 发布时间: 6年前

内容简介:在

eggjs 中上传文件的 官方文档

  • 1、配置上传的路由

    module.exports = (app) => {
      const { router, controller } = app;
      router.resources('file', '/api/v1/file', controller.file);
    };
    复制代码
  • 2、在 config/config.default.js 中配置上传的基本配置(可以参考 官方文档 )

    ...
    // 配置上传
    config.multipart = {
      fileSize: '50mb',
      mode: 'stream',
      fileExtensions: ['.xls', '.txt'], // 扩展几种上传的文件格式
    };
    ...
    复制代码
  • 3、安装几个基本的包

    npm install await-stream-ready stream-wormhole dayjs
    复制代码

二、使用 form 表单上传

  • 1、模板的代码

    <form method="POST" action="/api/v1/file" enctype="multipart/form-data">
      title: <input name="title" /> file: <input name="file" type="file" />
      <button type="submit">Upload</button>
    </form>
    复制代码
  • 2、在控制器中使用 fs 及数据流写入文件(在控制器层)
async create() {
  // 获取文件流
  const stream = await this.ctx.getFileStream();
  // 定义文件名
  const filename = Date.now() + path.extname(stream.filename).toLocaleLowerCase();
  // 目标文件
  const target = path.join('app/public/uploads', filename);
  //
  const writeStream = fs.createWriteStream(target);
  console.log('-----------获取表单中其它数据 start--------------');
  console.log(stream.fields);
  console.log('-----------获取表单中其它数据 end--------------');
  try {
    //异步把文件流 写入
    await awaitWriteStream(stream.pipe(writeStream));
  } catch (err) {
    //如果出现错误,关闭管道
    await sendToWormhole(stream);
    // 自定义方法
    this.error(err);
  }
  // 自定义方法
  this.success({ url: '/public/uploads/' + filename });
}
复制代码
  • 3、可以将生成的 url 地址传递服务层,存到数据库中

三、使用 ajax 上传文件

  • 1、基本的 html 页面

    <h1>ajax提交</h1>
    <input type="text" id="username" />
    <input name="file" type="file" id="file" />
    <button id="btn">提交</button>
    复制代码
  • 2、 jqajax

    <script>
      $('#btn').on('click', function() {
        console.log('提交按钮');
        let formData = new FormData();
        formData.append('title', $('#username').val());
        formData.append('image', $('#file')[0].files[0]);
        console.log(formData);
        $.ajax({
          url: '/api/v1/file',
          data: formData,
          method: 'post',
          contentType: false,
          processData: false,
          success: function(result) {
            console.log(result);
          },
        });
      });
    </script>
    复制代码

四、对上传的文件根据时间分类归档

  • 1、修改上传代码的控制器

    const fs = require('fs');
    const path = require('path');
    //故名思意 异步二进制 写入流
    const awaitWriteStream = require('await-stream-ready').write;
    //管道读入一个虫洞。
    const sendToWormhole = require('stream-wormhole');
    const dayjs = require('dayjs');
    
    async create() {
      const stream = await this.ctx.getFileStream();
      console.log('-----------获取数据 start--------------');
      console.log(stream.fields);
      console.log('-----------获取数据 end--------------');
      // 基础的目录
      const uplaodBasePath = 'app/public/uploads';
      // 生成文件名
      const filename = `${Date.now()}${Number.parseInt(
        Math.random() * 1000,
      )}${path.extname(stream.filename).toLocaleLowerCase()}`;
      // 生成文件夹
      const dirname = dayjs(Date.now()).format('YYYY/MM/DD');
      function mkdirsSync(dirname) {
        if (fs.existsSync(dirname)) {
          return true;
        } else {
          if (mkdirsSync(path.dirname(dirname))) {
            fs.mkdirSync(dirname);
            return true;
          }
        }
      }
      mkdirsSync(path.join(uplaodBasePath, dirname));
      // 生成写入路径
      const target = path.join(uplaodBasePath, dirname, filename);
      // 写入流
      const writeStream = fs.createWriteStream(target);
      try {
        //异步把文件流 写入
        await awaitWriteStream(stream.pipe(writeStream));
      } catch (err) {
        //如果出现错误,关闭管道
        await sendToWormhole(stream);
        this.error();
      }
      this.success({ url: path.join('/public/uploads', dirname, filename) });
    }
    复制代码
  • 2、其它的都不变

  • 3、上传生成的目录

    2019
    └── 06
        └── 21
            ├── 1561097630832563.png
            └── 1561097675536863.jpeg
    复制代码

以上所述就是小编给大家介绍的《一文搞懂eggjs中上传文件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PWA实战

PWA实战

[美]Dean Alan Hume / 郑丰彧 / 电子工业出版社 / 2018-6 / 69

Progressive Web App(PWA)是由谷歌提出的一整套技术解决方案,它致力于为 Web 提供出色的用户体验,并完美体现了渐进增强原则。作为为数不多的实战入门用书,《PWA 实战:面向下一代的Progressive Web App》旨在通过大量清晰示例来介绍 PWA 的主要特性。全书一共由五个部分组成:第一部分介绍 PWA 的概念及解锁 PWA 应用的关键—Service Worker......一起来看看 《PWA实战》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具