1. 程式人生 > >egg接收儲存圖片

egg接收儲存圖片

使用者上傳圖片到伺服器,伺服器接收並存在本地。雖然現在大多數網站會選擇第三方伺服器做圖片儲存,比如七牛,但是很多小型網站,或者初級研發者,還會使用本地圖片儲存。

1、如果前端用vue開發,上傳圖片請參考:https://blog.csdn.net/bocongbo/article/details/81670794

2、安裝寫入檔案外掛,寫入出錯關閉管道外掛

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

3、配置訪問地址router.js,注意要使用POST請求

router.post('/api/upload/img', controller.home.uploadImg);

4、編寫controller控制器home.js

'use strict';
const Controller = require('egg').Controller;
// 檔案儲存
const fs = require('fs');
const path = require('path');
const awaitWriteStream = require('await-stream-ready').write;
const sendToWormhole = require('stream-wormhole');

class HomeController extends Controller {
  async uploadImg() {
    const ctx = this.ctx;
    const stream = await ctx.getFileStream();
    // 檔名:隨機數+時間戳+原檔案字尾
    // path.extname(stream.filename).toLocaleLowerCase()為字尾名(.jpg,.png等)
    const filename = Math.random().toString(36).substr(2) + new Date().getTime() + path.extname(stream.filename).toLocaleLowerCase();
    // 圖片存放在靜態資源public/img資料夾下
    const target = path.join(this.config.baseDir, 'app/public/img', filename);
    // 生成一個檔案寫入 檔案流
    const writeStream = fs.createWriteStream(target);
    try {
        // 非同步把檔案流 寫入
        await awaitWriteStream(stream.pipe(writeStream));
    } catch (err) {
        // 如果出現錯誤,關閉管道
        await sendToWormhole(stream);
        throw err;
    }
    this.ctx.body = {
      code: 0,
      data: filename,
      msg: ''
    };
    // 前端使用:伺服器地址+檔名
    // http://localhost:7001/public/img/filename
  }
}

module.exports = HomeController;