egg.js ajax上传文件,一文搞懂eggjs中上传文件

在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、模板的代码

title: file:

Upload

复制代码

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

页面

ajax提交

提交

复制代码

2、jq

的ajax

$('#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);

},

});

});

复制代码

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

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

复制代码