Vue 實現圖片上傳是一項非常常見的需求，無論是前后端分離的項目還是傳統的 Web 應用，都需要使用該功能。Vue 是一款前端框架，它可以很好地幫助我們處理這類問題。下面我們將詳細講解如何使用 Vue 實現圖片上傳。 首先，我們需要準備一個上傳按鈕，用來觸發上傳事件。在 HTML 中，我們可以通過 input 標簽的 type 屬性設置為 file 實現。如下：

<input type="file" @change="uploadImg" ref="fileInput"/>

其中，@change 屬性是 Vue 中綁定事件的一種方式，當 input 輸入框的值改變時，會執行 uploadImg 函數。ref 屬性用于在 JavaScript 中獲取該元素。 接下來，我們需要在 uploadImg 函數中處理上傳邏輯。其中，我們首先需要從 input 中獲取圖片文件，可以使用以下代碼：

const files = this.$refs.fileInput.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const formData = new FormData();
formData.append('file', file);
// 發送請求
}

這里使用了 FormData 對象，它可以幫助我們將數據整合成一個 key-value 對象，并且方便發送 HTTP 請求。 接下來，我們使用 axios 發送 HTTP 請求，并在上傳成功后獲取服務器返回的 URL。如下：

axios.post('/api/upload', formData)
.then(res => {
console.log(res);
const imgUrl = res.data.url;
// 使用 imgUrl
})
.catch(err => {
console.error(err);
});

在上傳成功后，我們可以使用 imgUrl 保存圖片的 URL，以便于后續使用。 最后，我們將 imgUrl 渲染在頁面上，以便用戶預覽和使用。我們可以使用 img 標簽來顯示上傳的圖片：

<img :src="imgUrl" alt=""/>

這里使用了 Vue 的數據綁定語法，將 imgUrl 綁定到了 img 標簽的 src 屬性上，從而實現預覽功能。 綜上所述，Vue 實現圖片上傳不僅需要 HTML 和 CSS 的協作，還需要使用 JavaScript 幫助實現上傳和渲染邏輯。Vue 通過數據綁定等功能，使得圖片上傳功能的實現變得更加簡單。我們只需要處理好上傳和渲染即可。