使用element的upload元件實現一個完整的檔案上傳功能（上）
說到標題就有點心塞了，前段時間專案上需要實現一個檔案上傳的功能，然後就咔咔的去用了element的upload元件，不用不知道一用嚇一跳哇。在使用的過程中遇到了很多讓意想不到的問題，後來也因為時間問題，沒有去仔細研究問題出現的根本原因，只是想辦法解決了問題。這些天有點空閒時間，脫離專案單獨實現了一個完整的檔案上傳的功能（這個實踐過程中遇到的問題也比較多，文末會總結）
一.功能簡介
大致的功能描述：在一個表格中，有一列操作為附件管理功能。附件管理功能可以上傳附件、刪除附件。
最終需要的效果如下：
現在我們就開始完成這個功能吧
二.開發環境說明
專案開發環境是用vue-cli初始化的一個新專案（之前的文章《使用vue-cli搭建專案開發環境》有詳細介紹搭建過程）
專案根目錄名稱為：element-upload-demo
程式碼github地址：https://github.com/JEmbrace/element-upload-demo
三.安裝element
首先需要在專案根目錄下執行安裝命令：npm install element-ui --save-dev
安裝完成後，還添需要在入口檔案src/main.js中新增下面的程式碼引入element
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
這兩步完成後就可以在元件中使用element提供的元件了。
四.表格實現
為了簡單些，我們將後續的程式碼都新增到App.vue元件中，因此需要將src/App.vue元件中的三部分內容刪除
1.div#app下的內容刪除
2.將<script>標籤中的HelloWorld元件的匯入程式碼刪除
3.將components選項刪除
刪除完成後，最終的App.vue程式碼如下：
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>接著，我們需要實現頁面中的表格。表格使用element提供的Table表格元件，同時我們需要在表格的最後一列新增一列按鈕。
element-upload-demo\src\App.vue
<template>
<div id="app">
<!-- element-ui Table表格元件 -->
<el-table
class="my-table"
:data="tableData"
stripe
style="width:725px;">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="180">
</el-table-column>
<!-- 新增一列附件管理（檔案上傳）按鈕 -->
<el-table-column
prop="attach"
label="附件管理"
width="180">
<template>
<el-button size='small' type="primary">上傳<i class="el-icon-upload el-icon--right"></i></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路'
}]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
使用npm run dev啟動專案後瀏覽器已經能看到效果了
接著，我們稍微調整一下樣式，給table新增一個邊框並且將table居中顯示。
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin: 50px 30px;
text-align: center;
}
</style>
<style scoped>
#app .my-table{
display: inline-block;
border: 1px solid #EBEEF5;
}
</style>
調整後的效果：
五.附件管理彈窗
接下來就要實現這個功能：點選上傳按鈕展示附件上傳彈框。
這個功能需要使用element-ui提供的兩個元件，分別是Dialog對話方塊元件和Upload上傳元件 。
1.點選上傳按鈕展示Dialog對話方塊元件
要實現這個功能呢，需要做下面的幾點：
1.將<el-dialog>程式碼加入App.vue元件中
2.<el-dialog>元件中需要設定資料屬性dialogVisible。預設值為false，表示彈框不顯示。
3.表格中的上傳按鈕繫結click事件，觸發點選事件將dialogVisible設定為true，彈框顯示。
element-upload-demo\src\App.vue
<template>
<div id="app">
<!-- element-ui Table表格元件 -->
<el-table
class="my-table"
:data="tableData"
stripe
style="width:725px;">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="180">
</el-table-column>
<!-- 新增一列附件管理（檔案上傳） -->
<el-table-column
prop="attach"
label="附件管理"
width="180">
<template>
<!-- 上傳按鈕繫結click事件 -->
<el-button size='small' type="primary" @click="dialogVisible = true">上傳<i class="el-icon-upload el-icon--right"></i></el-button>
</template>
</el-table-column>
</el-table>
<!-- 此處為新增程式碼 -->
<!-- 1.將<el-dialog>程式碼加入App.vue元件中 -->
<!-- 2.<el-dialog>元件中需要設定資料屬性dialogVisibel。預設值為false,表示彈框不顯示。 -->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%">
<span>這是一段資訊</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<!-- 3.表格中的上傳按鈕繫結click事件，觸發點選事件將dialogVisible設定為true，彈框顯示。 -->
<el-button type="primary" @click="dialogVisible = false">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
// 新增屬性，預設值為false,表示彈框不顯示
dialogVisible: false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路'
}]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin: 50px 30px;
text-align: center;
}
</style>
<style scoped>
#app .my-table{
display: inline-block;
border: 1px solid #EBEEF5;
}
</style>
我們在來看下效果
2.將Dialog對話方塊中的內容修改為檔案上傳元件
上面我們只是將附件管理按鈕和對話方塊的展示管理到了一起，現在我們需要對話方塊的內容修改為檔案上傳控制元件。
實現這個功能兩個重要的步驟：
1.將<el-upload>程式碼新增到<el-dialog>程式碼塊中。
2.<el-upload>元件中需要設定檔案列表資料屬性attachList。預設值為空陣列，表示檔案列表為空。
備註：檔案列表上傳需要一個伺服器端的url，本示例使用的是element文件示例中的url。
element-upload-demo\src\App.vue
<template>
<div id="app">
<!-- element-ui Table表格元件 -->
<el-table
class="my-table"
:data="tableData"
stripe
style="width:725px;">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="180">
</el-table-column>
<!-- 新增一列附件管理（檔案上傳） -->
<el-table-column
prop="attach"
label="附件管理"
width="180">
<template>
<!-- 上傳按鈕繫結click事件 -->
<el-button size='small' type="primary" @click="dialogVisible = true">上傳<i class="el-icon-upload el-icon--right"></i></el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="附件管理"
:visible.sync="dialogVisible"
width="30%">
<!-- 1.將<el-upload>程式碼新增到<el-dialog>程式碼塊中 -->
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="attachList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將檔案拖到此處，或<em>點選上傳</em></div>
<div class="el-upload__tip" slot="tip">只能上傳jpg/png檔案，且不超過500kb</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
// 新增屬性，預設值為false,表示彈框不顯示
dialogVisible: false,
// 2.設定檔案列表屬性attachList,需要繫結到<el-upload>元素上。預設值為空陣列，表示檔案列表為空
attachList: [],
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路'
}]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin: 50px 30px;
text-align: center;
}
</style>
<style scoped>
#app .my-table{
display: inline-block;
border: 1px solid #EBEEF5;
}
</style>
再來看下效果：
可以看到我們的需求基本已經完成了。
現在在把dialog的樣式調整一下：
1.dialog的內容局左對齊顯示
2.檔案選擇虛線框的寬度和dialog一致
3.dialog的標題新增底色
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin: 50px 30px;
text-align: center;
}
#app .el-dialog__header{
background:#EBEEF5;
border-bottom: 1px solid#EBEEF5;
}
#app .el-dialog{
text-align: left;
}
#app .el-upload,#app .el-upload .el-upload-dragger{
width: 100%;
}
</style>
<style scoped>
#app .my-table{
display: inline-block;
border: 1px solid #EBEEF5;
}
</style>
調整完成後的介面
現在一個最簡單的檔案上傳功能就實現了。下面一篇文章，我們會繼續完善檔案上傳這個功能，在這個過程中也會深入探究這個檔案上傳元件中的‘坑’。