Vue Form Img是一個(gè)開源的Vue組件，它可以方便地在表單中添加圖片上傳功能。在使用Vue Form Img前，我們需要安裝它:

npm install --save vue-form-img

安裝完成后，在組件中引入Vue Form Img：

<template>
<div>
<vue-form-img name="avatar" v-model="avatar"></vue-form-img>
</div>
</template>
<script>
import Vue from "vue";
import VueFormImg from "vue-form-img";
export default {
components: {
VueFormImg
},
data() {
return {
avatar: ''
};
}
};
</script>

上述代碼中，我們定義了一個(gè)v-model綁定的變量avatar，表示用戶上傳的頭像。通過Vue Form Img組件的name屬性，我們可以指定上傳的文件字段名為avatar。

接下來，我們需要在后臺服務(wù)中處理圖片上傳。Vue Form Img定義了一個(gè)默認(rèn)的上傳URL為/api/upload，在后臺服務(wù)中需要處理此URL，上傳圖片，將圖片的訪問地址返回客戶端。示例代碼如下：

//后臺服務(wù)代碼
const express = require("express");
const app = express();
const multer = require("multer");
const bodyParser = require("body-parser");
app.use(bodyParser.json());
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, "./uploads/");
},
filename: function(req, file, cb) {
cb(null, Date.now() + "-" + file.originalname);
}
});
const upload = multer({ storage: storage });
app.post("/api/upload", upload.single("avatar"), (req, res) =>{
const file = req.file;
if (!file) {
const error = new Error("Please upload a file");
error.httpStatusCode = 400;
return next(error);
}
res.json({ imgUrl: `/uploads/${file.filename}` });
});
const port = process.env.PORT || 5000;
app.listen(port, () =>console.log(`Server started on port ${port}`));

最后，我們需要在前端視圖中顯示用戶上傳的頭像。可以使用img標(biāo)簽來顯示圖片，代碼如下：

<div>
<img v-if="avatar" :src="avatar" alt="avatar" /
>
</div>

至此，我們就實(shí)現(xiàn)了Vue Form Img的圖片上傳功能。Vue Form Img提供了豐富的API和自定義配置，以適應(yīng)不同的業(yè)務(wù)需求。使用Vue Form Img，我們可以用很少的代碼實(shí)現(xiàn)圖片上傳功能，提升開發(fā)效率，讓開發(fā)變得更加輕松。