egg接收儲存圖片
阿新 • • 發佈:2018-11-11
使用者上傳圖片到伺服器,伺服器接收並存在本地。雖然現在大多數網站會選擇第三方伺服器做圖片儲存,比如七牛,但是很多小型網站,或者初級研發者,還會使用本地圖片儲存。
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;