在開發一個網站或者一個應用時，圖片上傳是一個非常基礎的功能。Vue app 作為一種非常流行的前端框架，在實現圖片上傳時也有比較方便的組件。在這篇文章中，我們將詳細介紹如何在 Vue app 中實現圖片上傳。

在 Vue app 中實現圖片上傳需要用到的組件有：input、formdata、axios 和 Vue 組件。其中，input 組件用于選擇文件，formdata 用于將文件包裝成表格數據，axios 用于發送請求， Vue 組件用于將功能集成到頁面中。

<template>
<div>
<input type="file" ref="file"/>
<button @click="uploadFile">上傳</button>
</div>
</template>

我們先來看一下前端頁面中的組件代碼。如上所示，我們需要在頁面上添加一個 input 標簽和一個按鈕，用于選擇文件和上傳文件。在 input 標簽中，我們需要添加 ref 屬性來引用文件，方便我們在后續發送請求時獲取文件。

uploadFile () {
let file = this.$refs.file.files[0]
let formData = new FormData()
formData.append('file', file)
axios.post('/upload', formData).then((res) =>{
console.log(res.data)
})
}

下面是 JavaScript 中的代碼實現。在 uploadFile 方法中，我們首先從 ref 中獲取文件，然后實例化 FormData 對象，并調用 append 方法將文件包裝成表格數據。接著，我們使用 axios 發送 post 請求，并在請求成功后輸出結果。

const express = require('express')
const multer  = require('multer')
const app = express()
const upload = multer({ dest: 'uploads/' })
app.post('/upload', upload.single('file'), function (req, res, next) {
console.log(req.file)
})

最后，我們需要在后臺服務器中添加處理上傳文件的代碼。在 Node.js 中，我們可以使用 Multer 模塊來實現上傳文件的處理。如上所示，我們首先需要實例化 Multer 對象并指定文件上傳的目錄。然后，我們使用 post 方法監聽上傳請求，使用 upload.single 方法從請求中獲取上傳的文件，并在上傳成功后輸出文件信息。

以上便是使用 Vue app 實現圖片上傳的詳細過程。在實際開發中，我們可以根據需要對代碼進行一些調整和優化，來滿足更為復雜的需求。