在 web 開發(fā)過程中，添加貼圖是一個(gè)很常見的要求。Vue 前端框架可以幫助我們輕松地實(shí)現(xiàn)這個(gè)需求。下面將介紹如何使用 Vue 多次添加貼圖。

首先，在 HTML 中添加一個(gè) input 標(biāo)簽用于上傳圖片：

<input type="file" ref="fileInput" @change="uploadImage">

我們使用 ref 屬性來引用這個(gè) input 標(biāo)簽。然后在 @change 事件中，調(diào)用 uploadImage 方法進(jìn)行圖片上傳。

uploadImage() {
const file = this.$refs.fileInput.files[0]; // 獲取文件對(duì)象
const formData = new FormData(); // 創(chuàng)建formData對(duì)象
formData.append('image', file); // 添加圖片數(shù)據(jù)
axios.post('/upload', formData) // 發(fā)送 post 請(qǐng)求進(jìn)行上傳
.then(response =>{
// 處理上傳成功邏輯
})
.catch(error =>{
// 處理上傳失敗邏輯
});
}

通過 input 標(biāo)簽選擇的文件，我們可以通過 FormData 對(duì)象將其添加到請(qǐng)求體中，并通過 axios 發(fā)送 post 請(qǐng)求進(jìn)行上傳。在成功或失敗時(shí)可以執(zhí)行相應(yīng)的邏輯。

但是，上面的代碼只能上傳一張圖片。如果我們要多次上傳圖片并展示在頁(yè)面中，我們可以修改 uploadImage 方法：

uploadImage() {
const file = this.$refs.fileInput.files[0]; // 獲取文件對(duì)象
const formData = new FormData(); // 創(chuàng)建formData對(duì)象
formData.append('image', file); // 添加圖片數(shù)據(jù)
axios.post('/upload', formData) // 發(fā)送 post 請(qǐng)求進(jìn)行上傳
.then(response =>{
this.images.push(response.data); // 將上傳成功的圖片添加到 images 數(shù)組中
this.$refs.fileInput.value = ''; // 清空 input 對(duì)象中的值，以便下次選擇文件
})
.catch(error =>{
// 處理上傳失敗邏輯
});
}

在上傳成功后，我們將圖片添加到 images 數(shù)組中。然后清空 input 對(duì)象中的值，以便下次選擇文件。在 Vue 模板中，我們可以使用 v-for 指令遍歷數(shù)組并渲染每張圖片：

<div v-for="(image, index) in images" :key="index">
<img :src="image">
<button @click="deleteImage(index)">刪除</button>
</div>

上面的模板將 images 數(shù)組中的每張圖片都渲染到頁(yè)面中，同時(shí)為每張圖片添加一個(gè)刪除按鈕，點(diǎn)擊按鈕可以刪除該張圖片。刪除圖片的方法如下：

deleteImage(index) {
this.images.splice(index, 1); // 從 images 數(shù)組中刪除該張圖片
}

通過以上步驟，我們就可以在 Vue 中多次添加貼圖了。