在web應用中，往往會有多張圖片需要上傳。而對于Vue框架來說，非常方便地實現圖片的上傳與提交。本文將針對Vue多圖片提交進行詳細闡述，并介紹如何實現多圖片的提交。

首先，我們需要在Vue實例中定義一個data屬性，用于保存我們的圖片列表。我們可以簡單地定義一個數組，如下所示：

data: {
images: []
}

接下來，我們需要在HTML中渲染出上傳圖片的表單。這里我們使用一個簡單的HTML表單，如下所示：

<form><input type="file" @change="onImageChange" multiple><button type="button" @click="uploadImages">上傳圖片</button></form>

這里我們使用了Vue的事件綁定。當用戶選擇了上傳的圖片后，我們會觸發一個onImageChange的事件處理函數，將選擇的圖片添加到我們的圖片列表中。當用戶點擊了上傳圖片的按鈕，我們會觸發一個uploadImages的事件處理函數，將圖片列表上傳到服務器。

下面，我們來看看如何實現onImageChange函數。我們可以在Vue實例中添加如下的處理函數：

methods: {
onImageChange(event) {
const files = event.target.files;
for(let i = 0; i< files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) =>{
this.images.push(event.target.result);
};
}
},
}

在這個函數中，我們首先獲取到用戶選擇的所有文件對象，然后使用循環依次處理每個文件。對于每個文件，我們使用FileReader對象將文件轉換為base64編碼的字符串，然后將這個字符串添加到我們的圖片列表中。

最后，我們來看看如何實現上傳圖片的函數。上傳圖片需要使用到Ajax技術，我們可以使用Vue提供的$http模塊。具體實現如下：

methods: {
uploadImages() {
const formData = new FormData();
for(let i = 0; i< this.images.length; i++) {
formData.append('images[]', this.images[i]);
}
this.$http.post('/upload/images', formData, {
headers: {'Content-Type': 'multipart/form-data'}
}).then((response) =>{
console.log('上傳成功！');
});
}
}

在這個函數中，我們首先創建一個FormData對象，用于包含所有要上傳的圖片。然后依次將每個圖片添加到FormData中。最后，我們通過$http.post方法將FormData上傳到服務器。需要注意的是，由于我們上傳的是FormData對象，需要設置headers的Content-Type為multipart/form-data，否則上傳會失敗。

到此為止，我們已經完成了Vue框架下的多圖片提交。通過簡單的Vue實例代碼和HTML渲染，我們可以輕松實現多圖片的上傳和提交，方便快捷。