egg框架（文件上传及前端配置）

最近在写的后台涉及到了banner图的管理，于是我又研究了egg的文件上传，本来想用它的file模式，但是除了很多莫名其妙的bug，项目又很赶，只能先用stream模式，于是途中又去研究了node的流，现在头很大。 明明只是写一个简单的后台而已，为什么这么难搞，我太难了。😢

1.安装两个依赖，await-stream-ready 和 stream-wormhole

await-stream-ready：顾名思义,能够使用await进行文件的读写操作。 stream-wormhole：在文件上传出现异常时能够把流消耗掉。

不安装也没事，但是最好是安装了吧。

npm i await-stream-ready -S npm i stream-wormhole -S

2.在要使用的controller文件中引入

const awaitWriteStream = require('await-stream-ready').write; const sendToWormhole = require('stream-wormhole');

3.获取流

const stream = await ctx.getFileStream();

4.生成文件名 这里我直接用了上传文件的文件名，有需要的可以自己定义

const filename = stream.filename;

5.生成文件路径 同样可以自己定义放在哪个文件夹，但是要是在public下面的子文件夹

const target = path.join('app/public/uploads', filename);

6.生成文件写入文件流

const writeStream = fs.createWriteStream(target);

7.异步写入文件流

try { await awaitWriteStream(stream.pipe(writeStream)); } catch (err) { await sendToWormhole(stream); throw err; }

8.到第7步就是文件上传的所有代码了，这样文件上传基本就没有问题了，但是由于需要前端提交img地址到数据库进行关联，因此这里需要返回上传成功的图片的服务器端访问地址给前端。 egg框架静态资源默认都是放在public下面的，访问地址为ip:端口/public/…

// 返回网络访问地址 const imageUrl = path.join('/public/uploads', filename); // 文件响应 ctx.body = { code: 200, data: { msg: '上传成功', imgUrl: imageUrl, }, // url: '/public/uploads/' + filename, };

这样子，前端接收到该字段之后就可以通过ip:端口+返回的img地址访问到该图片了。 Vue代码如下： 在main.js中绑定文件地址前缀为全局变量

Vue.prototype.$fileUrl = 'http://127.0.0.1:7001'

在模板中使用

<img v-if="user.avater" :src="$fileUrl+user.avater" alt=""> <img v-else src="../assets/user_img.jpg" alt="">

这块代码仍需要很多优化，如：生成随机图片名，防止名字冲突。根据图片id找到之前的图片将其删除。以达到banner图的覆盖等等，虽然感觉不会很难，但是最近项目很赶，看心情吧😀。