[筆記] Body-Parser 無法解析的 FormData 解決方案

章節連結

使用範例
有關文章

運用 express 的框架來架設後端的 Node.js 伺服器時，當遇上前端傳來的表單資料為 multipart/form-data 格式時，那麼 body-parser 套件是不支援的。這時可以運用 multer 套件來解決這個問題。

使用範例

1.首先先準備好前端要上傳的表單為 multipart/form-data 格式。

// components/form.vue，每個input 記得要有 name 屬性，否則 formData 會沒有值
<form class="w-100" @submit.stop.prevent="handleSubmit">
  <input v-model="name" name="name" type="text">
</form>
const form = e.target;
const formData = new FormData(form);
this.$emit("after-submit", formData);

// views/index.vue，請確認後端 api 要接收什麼參數
<AdminForm v-else @after-submit="handleAfterSubmit" />
async handleAfterSubmit(formData) {
      try {
        const userId = this.user.id;
        const { data, statusText } = await adminAPI.putUser({
          formData,
          userId
        });
        if (statusText !== "OK") {
          throw new Error(data.message);
        }
        this.$router.push("/admin/users");
      } catch (err) {
        Toast.fire({
          icon: "error",
          title: err
        });
      }

// components/form.vue，每個input 記得要有 name 屬性，否則 formData 會沒有值

</form>

const form = e.target;

const formData = new FormData(form);

this.$emit("after-submit", formData);

// views/index.vue，請確認後端 api 要接收什麼參數

async handleAfterSubmit(formData) {

try {

const userId = this.user.id;

const { data, statusText } = await adminAPI.putUser({

formData,

userId

});

if (statusText !== "OK") {

throw new Error(data.message);

}

this.$router.push("/admin/users");

} catch (err) {

Toast.fire({

icon: "error",

title: err

});

}

2.後台伺服器設置

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = process.env.PORT || 3000
const cors = require('cors')
const multer = require('multer')
const upload = multer()

// 開啟跨網域連線
app.use(cors())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())
router.put('/admin/users/edit/:id', upload.array(), <your_controller>)

const express = require('express')

const bodyParser = require('body-parser')

const app = express()

const port = process.env.PORT || 3000

const cors = require('cors')

const multer = require('multer')

const upload = multer()

// 開啟跨網域連線

app.use(cors())

app.use(bodyParser.urlencoded({ extended: true }))

app.use(bodyParser.json())

router.put('/admin/users/edit/:id', upload.array(), <your_controller>)

有關文章

★全文分享★ [指南] 使用 Nodemailer + Express 來用 Server 寄出 Email

這幾天在研究「忘記密碼」的後端功能實作時，發現用 Nodemailer 搭配 Express 框架算是難度較低且方便維護的。這邊筆記下實作的一些細節。內容後端 1. 將 nodemailer 的核心 Instance 單獨放在一支程式碼

★全文分享★ [指南] Nodejs + TypeScript + Express 打造你的簡易 API Server

過往都是透過 Vue-Cli 或是 Vite 提供的安裝工具快速安裝 TypeScript 和前端框架一同使用。這次來試用自行一步步的安裝流程，並搭配 ESLint 和 Axios 來一同使用。重點過程1. 用 npm init -y 在一個資料夾根

★全文分享★ [筆記] 佈署 Node.js 到 Heroku 中需要預留的 Port 寫法

在開發 Node.js 的 APP 佈署到 Heroku 時，有一個需要避免的環境變數寫法要預留在 app 啟用點中，否則會莫名的報錯。內容Heroku 在自動化佈署你的 Node.js app 的時候，會預設一個環境變數名為 PORT。所以

★全文分享★ [筆記] Vue 按鈕 / 篩選資料架構

這是一篇在 Vue 上實作按鈕 / 篩選器的資料架構筆記。說明按鈕設計方式將一個個的篩選器 / 按鈕以物件的方式儲存，並存放到一個陣列中用 computed 來儲存判斷所需的條件用 watch 作即時的判斷處

★全文分享★ [筆記] Vue-Carousel 輕量化輪撥套件介紹

說到 Carousel 輪撥系列的套件，Swiper 可以說是滿知名的一個，也有整合版的 Vue Awesome Swiper 可供使用。不過若你只是要簡單輕量的輪撥功能，那麼 Vue-Carousel 在使用上更加直覺、方便且檔案大小較小

★全文分享★ [筆記] 在 Vue 中正確引用 src/assets 裡的圖片

在 Vue 專案內放於 src/assets 裡面的圖片檔案，會在打包 npm run build 的時候一起被整合到最終的 img 資料夾。因此，若你要在 Vue 專案引用這些圖片，要特別注意引用寫法，以免無法顯示。說明1. 你需

★全文分享★ [筆記] 將 Vue 專案自動佈署到 Github Pages 上

每次完成了一個 Vue 專案，要佈署到 Github 上，往往要手動執行 npm run build 之類的指令才能看到結果。這樣的重複動作，是可以寫腳本 (Script) 讓它自動化的。這篇就是筆記下自動佈署到 Github Pages 上

★全文分享★ [指南] 在 Vue 專案中，修改樣式方法

樣式方法” title=”[指南] 在 Vue 專案中，修改樣式方法”>

在 Vue 專案中，若要修改對於 <body> 上的樣式，會遇上一個問題：因為 vue 的框架頁面是載入在 <div id=”app”> 下，因此全域設定(像是<body>)的樣式就得額外在 <body> 進行設定或是載入其

★全文分享★ [筆記] 運用 Moment.js 製作 AM / PM 時間外掛

運用 Vue 和 Moment.js 來將 input-time 的 12 小時制時間，轉換成 24 小時制傳送到後端。運用套件和方法1. Vue-router：跳轉到展示 Demo 頁面2. Vue 的 v-model：雙向綁定後，可以在 component 內即時處理3. Vue 的 wat

★全文分享★ [筆記] CodeSandbox 線上編輯器模擬前端框架

隨著前端框架的發展，當需要多人編輯、展示或是教學時，CodeSandbox 提供了一個很好的環境來給予模擬。除了 Vue 以外，React, Angular, Vanilla……等等都可以良好支援，同時也可以模擬專案資料夾結構

★全文分享★ [筆記] Element-UI 的自定義表格邊框樣式

Element UI 的表格算是非常常用的模組化套件之一，不過其表格邊框樣試算是非常難以處理的。這邊筆記一下如何客製化的一些步驟(頓時覺得辦公室文書軟體要自定義樣式簡單多了)。需求這回的樣式

★全文分享★ [筆記] Vue 關於 slot-scope 的簡易認知

Vue 的 slot 系列使用方法，頭一回在 Element-UI 這個模組上看見，覺得用法挺神奇的，於是便筆記一下個人對 slot 的理解，以及怎樣的場景會使用到。核心概念slot 可以分為匿名、具名以及包含資料的 S

★全文分享★ [筆記] Vue Watch 監聽並延後發送請求

當使用 Vue Watch 的事件監聽時，若有要觸發傳送 XML 之類的事件時，屢屢發送的話會造成後端伺服器的負擔。你可以運用簡單的 Promise + setTimeout 的技巧，就可以解決這個問題。背後原理1. 先在要啟用

★全文分享★ [筆記] Vue SCSS 使用 Deep Selectors

在 Vue Sass 的使用方法上，若你有和其他的 Vue 套件一同使用，常會發生 css 選取困難的問題。Vue Loader 有提供所謂的 Deep Selectors，可以幫助你解決這些困擾，順利改動套件的樣式。程式碼示範// scss v

★全文分享★ [筆記] Vue 使用 SCSS

運用 Vue-cli 建立的專案，若要使用 SCSS 來較為語意化的管理自己的 css 檔，需要事先做一些設定。這邊筆記下直接在 .vue 中使用的方法和如何引入外部的 .scss 文件，並讓 vue 可以載入 loader 讀取編譯

★全文分享★ [筆記] Vue 生命週期

每一個 Vue Instance 在創建時，都會經歷過一個完整的生命週期，這算是 Vue 的初始化過程。在這個過程中，官方預設了許多的 hook 來提供開發者對於不同的階段做操作。生命週期圖週期類別beforeCreate

★全文分享★ [筆記] Vue 單元測試初探

隨著程式開發越來越龐大，那麼以「程式」測試「程式」是一件值得學習的投資了。除了節省時間外，也可以藉機測試一下程式的邏輯是否如你所預期的。這邊筆記下 Vue 的前端測試的初探與設定。

★全文分享★ [筆記] Vue2 Perfect-Scrollbar 置底開始

Vue 的 Perfect-Scrollbar 套件，是 Vue 中滿常使用的捲軸選單的套件。雖說有內建的一些自訂樣式的選項( 可用 options 載入)，不過若要像聊天室一樣，將捲軸條永遠置底，這個就得自己另外設定。程式碼

★全文分享★ [筆記] Vue 的狀態管理 Vuex 實作心得

Vuex 是 Vue 中用於狀態管理的工具，你可以將每個頁面、元件都會用到的「狀態」(像是：登入的使用者資料)，儲存在前端使用者的瀏覽器中。因為在頁面的切換中，並不會每次都向後端伺服器認證

★全文分享★ [筆記] Vue 自訂綁定 style 標籤

Vue 中的 v-bind 有一些預設的 style 選項如 :disabled。不過若要客製化的 style 顯示，像是 visibility:hidden 之類的，則可用 :style ={your-customized-style} 來搞定。語法// 若以綁定 visibility:hidden 選項，並依照一定

★全文分享★ [筆記] Vue 頁面元件定時自動跳轉

當 Vue 頁面需要定時自動跳轉的功能時，只需在該頁面的 <script> 標籤內撰寫一小段程式碼即可。在撰寫如 404 自動跳轉時可以不必再外掛其他的 JavaScript 了。步驟// 在 Vue 生命週期的 created 階段

★全文分享★ [筆記] Vue 刷新當前頁面

Vue 的使用上，若是要進行完某個操作後重新刷新「當前頁面」的話，用單純的 redirect 是沒有辦法成功跳轉的。這邊要筆記下可以成功實現這個目標的方法。程式碼示範// 在 App.vue 進行設定<template

★全文分享★ [筆記] BootstrapVue Pagination Vue 分頁套件使用

在網路世界中常用的前端 css 套件 – Bootstrap，搭配上前端框架 Vue，有好心人已經統整成了 BootstrapVue 的套件，讓 Bootstrap 內的許多元件(components)有更多的運用。這回是要採用裡頭的 Pagination，並整合

★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement

當運用官方套件迅速建立一個 Vue 專案後，若你是採用 ESLint 的規則，那麼在除蟲時會遇見 Unexpected console statement 的錯誤，這是由於 ESLint 的預設規則為 no-console 所導致的。這篇記載下解決這問題方

★全文分享★ [筆記] Vue-cli 輸出 console.log 的結果

使用 Vue-cli 輸出頁面結果到網頁上時，若是需要輸出錯誤結果的瀏覽器的 console.log 結果，會因為預設的 Eslint 語法規則檢查而報錯。這在開發階段算是相當不方便的一件事。所以，這篇筆記下如何

★全文分享★ [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch

運用 Vue.js 前端框架，將發送到後端 API 請求的回傳 json 檔案，在頁面上做出分頁、搜尋表格的內容，而不用屢次變動資料就對後端發送請求。實作需求1.分頁表格元件 (component) 的資料由父層的頁面

★全文分享★ [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題

Vue-cli 運用 npm run build 將專案打包成靜態檔案給後端伺服器存取後，常會遇到 Favicon (每個網頁左上角的圖示) 無法正常顯示的問題。這篇筆記下各種解決這個問題的辦法。語法// favicon// 1. 將 index.html

★全文分享★ [筆記] 全端開發本機端資料互通 Vue.config.js 設定

在本機端執行前後端(全端)共同開發時，由於前後端都會各自啟用自己的伺服器，那麼前端要怎樣在本機端模擬發送請求到後端拿資料呢？若是運用 Vue.js 的前端框架，可以利用 Vue.config.js 的檔案來

★全文分享★ [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

這篇是解決不時在測試 Vue 專案上時，常會在瀏覽器的 console 內看見的無效 GET 請求如：http://localhost:8080/sockjs-node/info?t=<一串亂數>，要如何處理。步驟1.若是處在開發階段看到的話，會因為你所

★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案，並結合 Bootstrap 和 Node.js 二者來產生一個前後端兼備但卻彼此分離的網路應用程式。步驟Vue.js 框架下，其網址多半會帶有 # 字樣。這是

★全文分享★ [指南] npm 安裝操作教學

npm 的本質上是配合 Node.js 來使用的，所以要使用 npm 來安裝套件，那先安裝 Node.js 就是必須的步驟。這篇是記錄 npm 的相關指令操作。操作指令NPM 原稱為 Node Package Manager，它是一個線上的 JavaScript

★全文分享★ [筆記] 線上正規表示式測試器

在寫程式時，常會使用正規表示式 (Regular Expression) 來比對資料的相對性。不過其指令相當的不直覺，為了避免浪費過多的測試時間，所以這回找到 Regular Expressions 101 網站所提供的比對功能，來讓你

按讚加入粉絲團

[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

使用範例