前端使用element-ui的el-upload元件上傳圖片

el-upload上傳圖片，當圖片上傳完成並獲得後端傳來的圖片地址（伺服器地址）後，隱藏上傳元件並顯示圖片：

<el-upload
  v-if="!imgUrl"
  class="upload-demo"
  drag
  :action="uploadUrl"
  :on-change="getFile"
  accept=".jpg"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">將檔案拖到此處，或<em>點選上傳</em></div>
  <template v-slot:tip>
    <div class="el-upload__tip">只能上傳jpg/png檔案，且不超過500kb</div>
  </template>
</el-upload>
<img v-else :src="imgUrl" alt="">

getFile (file) {
  const { status, response } = file
  if (status === 'success' && response?.code === 0) {
    const { data } = response
    this.imgUrl = data
  }
}
 

後端

後端將獲取到的圖片放到node的靜態伺服器上，伺服器上這張圖片的地址也就是前端需要拿到並展示的圖片地址——後端專案的/app/public/下

具體流程

• 前端上傳圖片傳送post請求；
• egg.js通過router呼叫controller.home.uploadImg ；
• 函式通過一系列操作將檔案放到 後端專案/app/public 資料夾下；
• 傳遞給前端圖片地址 後端伺服器地址/圖片名字（如若後端專案跑在7001埠 則回傳的url為 http://127.0.0.1:7001/xxx.jpg）。

前端頁面不能直接展示本地電腦裡某個位置的圖片，會出現 Not allowed to load local resource 的錯誤：

async uploadImg(ctx) {
	// 新增使用者資訊
	const part = ctx.multipart({ autoFields: true });
	const stream = await part();
	if (stream) {
	  const fileType = stream.mimeType.split('/')[ 1 ];
	  const filename = Date.now() + '.' + fileType || stream.filename.toLowerCase();
		// UPLOAD_URL為'./app/public/'
	  const target = path.join(UPLOAD_URL, filename);
	  const writeStream = fs.createWriteStream(target);
	  await pump(stream, writeStream);
	  new Result(`http://${ctx.host}/public/${filename}`, '上傳成功').success(ctx.response);
	}
}
 

為什麼放到public目錄下就能直接訪問了呢？

我們來簡單看一下egg.js的執行機制

eggjs執行機制

eggjs 是功能更豐富、更規範的koa

使用koa時，你要寫一個專案，要往裡面加很多中介軟體，要寫指令碼載入routes資料夾下面的所有路由以及model資料夾下面的所有sequelize模型，koa僅僅是一個骨架，其他的都是你來完成，自由度高，但整合度低，每建立一個新專案都要做很多重複工作。egg.js是封裝了一套koa，可以理解成大禮包版koa，整合度高，可以輕鬆建立一個專案而不用做很多繁瑣的初期工作，解放生產力，更可貴的是有一套現成的規範提供給我們，不需要我們自己再去探索一套規範，比如router放哪裡，controller放哪裡，需不需要service，哪些放在service等等。

egg.js專案架構

綠色虛線框中的所有元件組成了一個Worker，這就是egg.js中實際執行程式碼邏輯的程序，是一個node伺服器。

• request進來後，先穿過中介軟體，自己定義的中介軟體都放在projectDir/app/middleware下，並在config中啟用；
• egg.js內建了egg-static中介軟體，將靜態資源放在projectDir/app/public中，只會經過egg-static中介軟體之前的中介軟體，最後egg-static直接響應給客戶端，不會到達其後的中介軟體以及Router；
• 如果不是public中的資源，將會穿越所有中介軟體，到達路由。一般所有的路由都放在router.js中，這個檔案沒有任何邏輯，而是直接指向一個處理請求的controller，只起到目錄和索引的作用；
• Controller都放在projectDir/app/controller中，不含有具體的業務邏輯，業務邏輯都在Service中，Controller只負責呼叫並組合Service，最後將響應提交給客戶端；
• Service放在projectDir/app/service中，負責呼叫Model，進行具體業務；
• 除此之外，Worker中還有定時任務，寫在projectDir/app/schedule資料夾中；
• 各個部件的所有可操控行為，都可以在projectDir/config/中的配置檔案中定義，配置檔案可以同時有很多份，default會被具體環境的配置檔案中的同名欄位覆蓋，具體使用哪份配置，是根據EGG_SERVER_ENV這個環境變數的值。

https://www.jianshu.com/p/6b04330ee4a1