今天我們來聊一下Vue中ElementUI的圖片上傳功能，ElementUI是一個基于Vue的組件庫，提供了很多常用的UI組件，其中圖片上傳組件是我們開發中經常會使用到的。

首先我們需要在項目中引入ElementUI的組件庫，具體是在main.js中引入ElementUI的css和js文件：

import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);

引入成功之后，就可以在組件中使用ElementUI的圖片上傳組件了，首先需要在template中加入如下代碼：

點擊上傳

在這段代碼中，el-upload是ElementUI中的圖片上傳組件，class屬性可以定義樣式，action屬性是指上傳文件的地址，on-preview、on-remove、on-success是上傳成功、上傳失敗和上傳預覽的回調函數，file-list是上傳的文件列表，el-button是一個基礎按鈕組件。

接下來我們需要在script標簽中定義我們的回調函數，具體代碼如下：

export default {
name: 'uploadDemo',
data() {
return {
fileList: [{
name: 'food.jpg',
url: 'https://xxx.cdn.com/xxx/food.jpg'
}, {
name: 'nature.jpg',
url: 'https://xxx.cdn.com/xxx/nature.jpg'
}],
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
}
}
};

在實際使用中，我們可以根據需求自定義各個回調函數的實現，例如handleRemove函數可以在文件從文件列表中移除時，執行一些操作，handlePreview函數可以在文件上傳預覽時，顯示文件的相關信息，handleSuccess函數可以在文件上傳成功后，執行相應的操作等等。

最后，我們還可以在上傳組件中加入更多的配置選項，例如設置文件的上傳方式、上傳粘貼板中的圖片等等，更多的配置選項可以參考ElementUI官方文檔中的介紹。

通過這篇文章的介紹，相信大家對使用ElementUI的圖片上傳組件有了更深入的了解，希望對大家在實際項目中的開發有所幫助。