使用element的upload組件實現一個完整的文件上傳功能（上）

　　

　　

　　

作者：小土豆biubiubiu

博客園：www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

微信公眾號：不知名寶藏程序媛

(關注"不知名寶藏程序媛"免費領取前端電子書籍。文章公眾號首發，關注公眾號第一時間獲取最新文章。)

碼字不易，點贊鼓勵喲~

 

 

　　

　　說到標題就有點心塞了，前段時間項目上需要實現一個文件上傳的功能，然后就咔咔的去用了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>

　　調整完成后的界面

　　

 

 　　

 　　現在一個最簡單的文件上傳功能就實現了。下面一篇文章，我們會繼續完善文件上傳這個功能，在這個過程中也會深入探究這個文件上傳組件中的‘坑’。

 

作者：小土豆biubiubiu

博客園：www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

簡書：https://www.jianshu.com/u/cb1c3884e6d5

微信公眾號：不知名寶藏程序媛

(關注"不知名寶藏程序媛"免費領取前端電子書籍。文章公眾號首發，關注公眾號第一時間獲取最新文章。)

碼字不易，點贊鼓勵喲~

 

---