Vue Element Upload是一個基于Vue.js和Element UI的文件上傳組件。它提供了多文件上傳、文件刪除、文件排序、文件預覽、上傳進度展示等功能。下面我們來看一下如何使用Vue Element Upload來實現文件上傳。

首先，我們需要引入Vue Element Upload組件：

import ElUpload from 'element-upload'

然后，在vue組件中使用ElUpload組件：

<el-upload
class="upload-demo"
ref="upload"
action="/upload"
:on-success="handleSuccess">
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>

這里，我們設置了組件的class為upload-demo，上傳的目標地址為“/upload”，并且定義了上傳成功后的回調函數handleSuccess。

接下來，我們需要實現handleSuccess函數，該函數需要接收服務器返回的上傳成功的文件信息，并將該信息保存到組件的files數組中：

handleSuccess(response, file, fileList) {
this.files.push({
name: file.name,
url: response.url
})
}

最后，在組件中展示上傳的文件列表：

<el-upload-list :items="files">
<el-upload-list-item slot-scope="{ item }">
<a :href="item.url" target="_blank">{{ item.name }}</a>
</el-upload-list-item>
</el-upload-list>

這里我們使用了Element UI提供的el-upload-list和el-upload-list-item組件，將上傳的文件列表展示出來，并且點擊文件名可以在新頁面打開文件。

Vue Element Upload提供了一些其他的配置項和事件，可以根據自己的需求進行配置和定制化。使用Vue Element Upload，我們可以輕松地實現文件上傳功能，并且可以通過基于Vue.js和Element UI的優秀生態系統來擴展和定制化。