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

Posted on2020-02-142020-02-14AuthorANDY LIEN

章節連結

使用範例
有關文章

運用 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
        });
      }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

// 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

});

}

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>)

1

2

3

4

5

6

7

8

9

10

11

12

13

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>)

有關文章

★全文分享★ [筆記] Express + TypeScript + http-proxy-middleware 架設簡易開發 Proxy 伺服器

[筆記] Express + TypeScript + http-proxy-middleware 架設簡易開發 Proxy 伺服器

既有專案由於後端是採用 session 認證。為

★全文分享★ [筆記] Node.js Express 撰寫單元測試 Unit Test 思路和踩坑記錄

[筆記] Node.js Express 撰寫單元測試 Unit Test 思路和踩坑記錄

想說用 Node.js 開發一個後端 API 系統給自

★全文分享★ [筆記] Nuxt2 專案自 Node 14 升級成 Node 16 的注意事項

[筆記] Nuxt2 專案自 Node 14 升級成 Node 16 的注意事項

有鑑於 Node 14 即將在 2023 年的 4 月底停止

★全文分享★ [筆記] Sheet.js 搭配 zip.js 將 Excel 檔案包在一個密碼保護的 ZIP 中

[筆記] Sheet.js 搭配 zip.js 將 Excel 檔案包在一個密碼保護的 ZIP 中

這回在實務上遇到要幫生成的 Excel 檔案加

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

[指南] 使用 Nodemailer + Express 來用 Server 寄出 Email

這幾天在研究「忘記密碼」的後端功能實

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

[指南] Nodejs + TypeScript + Express 打造你的簡易 API Server

過往都是透過 Vue-Cli 或是 Vite 提供的安裝

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

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

在開發 Node.js 的 APP 佈署到 Heroku 時，有一

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

[筆記] Vue 按鈕 / 篩選資料架構

這是一篇在 Vue 上實作按鈕 / 篩選器的資

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

[筆記] Vue-Carousel 輕量化輪撥套件介紹

說到 Carousel 輪撥系列的套件，Swiper 可以

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

[筆記] 在 Vue 中正確引用 src/assets 裡的圖片

在 Vue 專案內放於 src/assets 裡面的圖片檔

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

[筆記] 將 Vue 專案自動佈署到 Github Pages 上

每次完成了一個 Vue 專案，要佈署到 Github

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

[指南] 在 Vue 專案中，修改 <body data-lazy-src=

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

在 Vue 專案中，若要修改對於 <body> 上

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

[筆記] 運用 Moment.js 製作 AM / PM 時間外掛

運用 Vue 和 Moment.js 來將 input-time 的 12 小

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

[筆記] CodeSandbox 線上編輯器模擬前端框架

隨著前端框架的發展，當需要多人編輯、

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

[筆記] Element-UI 的自定義表格邊框樣式

Element UI 的表格算是非常常用的模組化套

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

[筆記] Vue 關於 slot-scope 的簡易認知

Vue 的 slot 系列使用方法，頭一回在 Element-

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

[筆記] Vue Watch 監聽並延後發送請求

當使用 Vue Watch 的事件監聽時，若有要觸

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

[筆記] Vue SCSS 使用 Deep Selectors

在 Vue Sass 的使用方法上，若你有和其他的

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

[筆記] Vue 使用 SCSS

運用 Vue-cli 建立的專案，若要使用 SCSS 來

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

[筆記] Vue 生命週期

每一個 Vue Instance 在創建時，都會經歷過

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

[筆記] Vue 單元測試初探

隨著程式開發越來越龐大，那麼以「程式

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

[筆記] Vue2 Perfect-Scrollbar 置底開始

Vue 的 Perfect-Scrollbar 套件，是 Vue 中滿常使

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

[筆記] Vue 的狀態管理 Vuex 實作心得

Vuex 是 Vue 中用於狀態管理的工具，你可以

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

[筆記] Vue 自訂綁定 style 標籤

Vue 中的 v-bind 有一些預設的 style 選項如 :d

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

[筆記] Vue 頁面元件定時自動跳轉

當 Vue 頁面需要定時自動跳轉的功能時，

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

[筆記] Vue 刷新當前頁面

Vue 的使用上，若是要進行完某個操作後重

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

[筆記] BootstrapVue Pagination Vue 分頁套件使用

在網路世界中常用的前端 css 套件 – Bootstra

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

[筆記] Vue 避免 ESLint 的 Unexpected Console Statement

當運用官方套件迅速建立一個 Vue 專案後

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

[筆記] Vue-cli 輸出 console.log 的結果

使用 Vue-cli 輸出頁面結果到網頁上時，若

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

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

運用 Vue.js 前端框架，將發送到後端 API 請

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

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

Vue-cli 運用 npm run build 將專案打包成靜態

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

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

在本機端執行前後端(全端)共同開發時，

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

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

這篇是解決不時在測試 Vue 專案上時，常

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

[筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生

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

[指南] npm 安裝操作教學

npm 的本質上是配合 Node.js 來使用的，所以

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

[筆記] 線上正規表示式測試器

在寫程式時，常會使用正規表示式 (Regular

按讚加入粉絲團

延伸閱讀

Blogimove部落格搬家技術服務