今天我們要來介紹一種Vue實現圖片上傳的方法。在網站開發中，圖片上傳是非常常見的功能，使用Vue實現可以方便快捷，同時也可以提高用戶體驗。在本文中，我們將通過一個實例來介紹Vue實現圖片上傳的步驟。

//模板代碼< template >
選擇圖片
< /template >//腳本代碼< script >export default {
data() {
return {
src: "", //圖片地址
showImg: false, //是否顯示圖片
};
},
methods: {
uploadImg(e) {
const file = e.target.files[0];
let formdata = new FormData(); //創建form表單
formdata.append("file", file);
//上傳圖片接口地址
const url = "http://localhost:8080/upload";
//發送http請求
this.$axios
.post(url, formdata, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) =>{
this.src = res.data.src;
this.showImg = true;
});
},
},
};< /script >

以上是實現圖片上傳的Vue代碼。首先，需要創建一個div容器，然后在選擇圖片按鈕中使用input標簽實現文件選擇功能。接下來，在show-img中使用img標簽來展示圖片，需要在data中聲明src和showImg兩個變量，其中showImg用來控制圖片是否展示。在uploadImg中，首先獲取用戶選擇的文件，然后創建FormData對象，向服務器發送POST請求，這里使用了axios庫，所以需要先引入。在請求頭中聲明Content-Type為multipart/form-data，這是因為formData對象將文件數據以多個part形式傳遞。服務器在收到請求后，將文件儲存到對應位置，然后返回圖片的url路徑。最后，在前端頁面中將這個url賦值給src變量，就可以展示圖片了。

需要注意的是，上傳圖片的服務器接口需要根據實際情況進行編寫，這里只是簡單展示一個示例接口。除此之外，在實際開發中，可能需要對圖片進行壓縮、裁剪等操作，這些操作可以通過第三方庫來實現，例如compressorjs、vue-cropper這些工具庫。

總的來說，Vue實現圖片上傳功能相對簡單，通過使用FormData對象可以實現文件的上傳，通過axios庫可以方便地向服務器發送請求，并在前端展示圖片。這樣既可以提高用戶體驗，又可以方便地管理網站中的圖片資源。