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

時間  2020-01-01
標籤 使用 element upload 組件 實現 一個 完整 文件 上傳 功能 简体版
原文   原文鏈接

　　

　　本篇文章是《使用element的upload組件實現一個完整的文件上傳功能（上）》的續篇。html

　　話很少說，接着上一篇直接開始vue

一.功能完善—保存表格中每一列的文件列表狀態

1.思路web

　　保存表格中每一列的文件列表狀態，這個功能是什麼意思呢，咱們先看下前面示例的效果。element-ui

　　

　　在上面這個操做中，咱們作了兩件事：json

　　　　1.給表格第一列的上傳了一個附件圖片數組

　　　　2.點擊表格第二列、第三列、第四列的上傳按鈕，分別查看這三列的附件列表瀏覽器

　  那麼最後的結果發現後三列的附件列表展現的都是第一列的附件圖片，這個顯然不符合正常的邏輯。仔細去看看咱們的代碼而且思考一下，也很快能知道這個問題出現的緣由：咱們給<el-upload>的file-list屬性綁定了attachList數據。attachList這個值初始是空數組，當咱們點擊第一列的附件管理上傳一張圖片後，attachList數組就會增長一個元素。而全部上傳按鈕觸發打開的彈框組件是同一個（咱們頁面中只有一個<el-upload>元素），而彈框組件綁定的文件列表數據attachList也是公用的，所以就會出現上面的狀況。到這裏也很容易能想到思路去解決這個問題：不一樣彈窗綁定的文件列表數據attachList分開保存。app

　　那這個辦法的言外之意就是須要在data中定義4個attachList，那定義四個數據，咱們就得定義寫四個<el-dialog>分別去綁定這個四個數據。函數

　　這個辦法到是能解決問題，可是假如咱們的表格有100行數據呢，咱們難道要定義100個attachList，在寫100個<el-dialog>嗎？這顯然就不現實了。post

　　而後我換了個思路：定義一個數組去保存不一樣的文件列表數據。這樣在每次點擊上傳按鈕時，將該列的文件列表數據賦值給另一個數據currentAttachList，而後咱們的<el-dialog>組件只須要綁定這個currentAttachList數據便可。這樣就省事多了。

　　最後就是保存不一樣的文件列表數據的數組，這個要怎麼定義呢。實際上也很簡單，咱們能夠將這個數據當作表格數據的一個屬性定義在tableData中。

currentAttachList: [],
tableData: [{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀區金沙江路',
  attachList:[]
}, {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀區金沙江路',
  attachList:[]
}, {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀區金沙江路',
  attachList:[]
}, {
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀區金沙江路',
  attachList:[]
}]

　　tableData中的attachList就是咱們定義的文件列表數據。

　　數據定義好了以後，咱們繼續下面的工做。

2.上傳按鈕的點擊事件修改

　　根據前面咱們寫的一大堆的思路，能夠知曉當咱們點擊【附件管理】按鈕時，須要作兩件事：

　　　　1.獲取這一列表格數據中的附件列表，賦值給currentAttachList

　　　　2.將控制彈框顯示的dialogVisible設置爲true，讓彈框顯示　　

　　那咱們以前寫的點擊【附件管理】按鈕的事件處理程序以下：

<el-button size='small' type="primary" @click="dialogVisible = true">
  上傳
  <i class="el-icon-upload el-icon--right"></i>
</el-button>

　　因此如今咱們須要將點擊事件改成函數調用。

　　在這以前呢，咱們說了須要獲取上傳按鈕對應那一列的attachList數據，那咱們如何知道當前點擊的上傳按鈕是屬於表格的第幾列呢？這個咱們使用插槽就能夠實現了。

<el-table-column
  prop="attach"
  label="附件管理"
  width="180">
  <template slot-scope="scope">
    <!-- 上傳按鈕綁定click事件 -->
    <el-button size='small' type="primary" @click="uploadBtnClick(scope.$index)">
      上傳
      <i class="el-icon-upload el-icon--right"></i>
    </el-button>          
  </template>
</el-table-column>

　　uploadBtnClick函數實現：

uploadBtnClick (index){
  // 獲取上傳按鈕對應那一列表格數據中的附件列表，賦值給currentAttachList
  this.currentAttachList = this.tableData[index].attachList;
  // 將控制彈框顯示的dialogVisible設置爲true，讓彈框顯示
  this.dialogVisible = true;
}

　　這兩件事情完成後呢，記得將<el-dialog>的file-list綁定的數據改成currentAttachList。

　　最後完整的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 slot-scope="scope">
            <!-- 上傳按鈕綁定click事件 -->
            <el-button size='small' type="primary" @click="uploadBtnClick(scope.$index)">
              上傳
              <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%">
          <!-- 將<el-upload>代碼添加到<el-dialog>代碼塊中 -->
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="currentAttachList">
            <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,
      // 設置當前文件列表數據currentAttachList，每次用戶點擊上傳按鈕，該數據就會被賦值爲當前按鈕那一列tableData中的attachList數據
      currentAttachList: [],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }]
    } 
  },
  methods: {
    uploadBtnClick (index){
      // 獲取上傳按鈕對應那一列表格數據中的附件列表，賦值給currentAttachList
      this.currentAttachList = this.tableData[index].attachList;
      // 將控制彈框顯示的dialogVisible設置爲true，讓彈框顯示
      this.dialogVisible = true;
    }
  }
}
</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;
}
#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>

　　在瀏覽器中看下效果：

　　

　　仔細的看幾遍這個效果，描述一下咱們的操做和結果：

　　　　1.在第四列上傳了一張圖片，完成以後關閉彈窗

　　　　2.點擊第三列的上傳按鈕，獲取tableData中第三列的attachList賦值給currentAttachList，此時第三列的attachList爲空，因此currentAttachList也是空，因此第三列的附件列表展現爲空，正常。（能夠看到第三列的彈框點開後文件列表是一個從無到有的動畫，是由於第四列上傳了一個圖片，currentAttachList包含一個元素，當點擊第三列的上傳按鈕時將currentAttachList賦值爲空，而element-ui提供的控件是包含動畫的，因此就有了這個視覺上不太好的效果）

　   然而，咱們最後還有一個操做：在查看完第三列的文件列表後，在返回點擊第四列的附件管理按鈕，查看第一個操做上傳的文件列表。最後這個操做，咱們驚奇的發現前面上傳在第四列的文件列表丟了。

　　這個問題也比較好理解：上傳完成後，須要將上傳成功的文件信息保存到對應的那一列的attachList數組中。前面寫的代碼，咱們只讀取了tableData中的attachList，在上傳成功之後卻沒有將文件的信息保存到attachList裏面，那麼每次從新點擊【附件管理】按鈕，從tableData獲取的attachList永遠是空，在賦值給currentAttachList，文件列表就什麼也不會展現。如今咱們能夠接着修改代碼了，須要修改的內容以下：

1.<el-upload>添加on-success鉤子函數，當上傳成功將本次上傳的文件信息push到對應tableData.attachList

2.添加methods:uploadSuccess

關於這個uploadSuccess函數，它須要將上傳成功的文件信息保存到對應的tableData.attachList，那咱們就須要知道當前是一列的按鈕觸發的彈框。這個問題就是以前在uploadBtnClick函數傳遞的參數index，因此咱們須要將這個index保存到vue的數據屬性上，這樣在uploadSuccess函數中也能用上。

data () {
    return {
          //當前點擊打開彈框的按鈕在表格中是那一列
      currentIndex: 0,
    }
}

　　uploadBtnclick方法須要新增長下面的代碼

uploadBtnClick (index){
  // 設置currentIndex
  this.currentIndex = index;
},

　　uploadSuccess實現

 uploadSuccess(response, file, fileList){
   var currentIndex = this.currentIndex;
   this.tableData[currentIndex].attachList.push({
     'name':file.name
   });
 }

　　最終完整的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 slot-scope="scope">
            <!-- 上傳按鈕綁定click事件 -->
            <el-button size='small' type="primary" @click="uploadBtnClick(scope.$index)">
              上傳
              <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%">
          <!-- 將<el-upload>代碼添加到<el-dialog>代碼塊中 -->
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="currentAttachList"
            :on-success="uploadSuccess">
            <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,
     // 設置當前文件列表數據currentAttachList，每次用戶點擊上傳按鈕，該數據就會被賦值爲當前按鈕那一列tableData中的attachList數據
      currentAttachList: [],
      //當前點擊打開彈框的按鈕是那一列
      currentIndex: 0,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }]
    } 
  },
  methods: {
    uploadBtnClick (index){
      // 獲取上傳按鈕對應那一列表格數據中的附件列表，賦值給currentAttachList
      this.currentAttachList = this.tableData[index].attachList;
      // 將控制彈框顯示的dialogVisible設置爲true，讓彈框顯示
      this.dialogVisible = true;
      // 設置currentIndex
      this.currentIndex = index;
    },
    uploadSuccess(response, file, fileList){
      var currentIndex = this.currentIndex;
      this.tableData[currentIndex].attachList.push({
        'name':file.name
      });
    }
  }
}
</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;
}
#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>

　　瀏覽器查看結果：

　　

　　能夠發現，前面的問題已經被咱們成功解決。

3.動畫刪除

如今呢，這個功能已經實現了。惟一很差的視覺效果就是文件列表的那個動畫，咱們將這個動畫刪除。

<style>
#app .el-upload-list li{
  transition: none;
}

動畫刪除後的效果

 　　

　　能夠看到，如今的效果就正常了。

 

三.功能完善—刪除附件

　　刪除文件這個功能，<el-upload>組件自己是支持的，只是在咱們這種多文件上傳的狀況中，還須要添加一下代碼。

　　咱們先看一下組件自己提供的這個刪除功能

　　

　　咱們的操做順序和結果以下

　　　　①點擊第四列上傳按鈕

　　　　②成功上傳兩張圖片

　　　　③刪除第二張圖片

　　　　④關閉彈窗，查看第四列文件列表，文件列表顯示正常

　　　　⑤點擊第三列上傳按鈕，文件列表爲空顯示正常

　　　　⑥在點擊第四列的上傳按鈕，發現前面刪除的那張圖片依然顯示在文件列表中。

　　關於咱們刪除第四列的一張圖片後，在第⑥步點擊查看發現圖片依然存在的這個問題很好解釋，咱們能夠回頭看一下uploadBtnclick函數的邏輯：

　　　　每次點擊上傳按鈕，將對應的tableData.attachList賦值給currentAttachList。

　　　　而咱們刪除的時候，並無刪除對應的tableData.attachList中的數據，因此給currentAttachList的賦值操做致使文件列表展現的依然是以前的數據。

可是這裏有一個疑惑的點就是第④個步驟：關閉彈窗，查看第四列文件列表，文件列表顯示正常。這個就比較奇怪了，刪除第二張圖片後，按照前面咱們梳理的uploadBtnclick函數的邏輯，此時文件列表應該仍是會包含刪除的那個文件。

關於這個問題，咱們在uploadBtnClick函數中添加一些打印信息：

uploadBtnClick (index){
    console.log('uploadBtnClick');
    console.log("this.tableData[index].attachList");
    console.log(this.tableData[index].attachList);
    // 獲取上傳按鈕對應那一列表格數據中的附件列表，賦值給currentAttachList
    this.currentAttachList = this.tableData[index].attachList;
    console.log("this.currentAttachList");
    console.log(this.currentAttachList);
    // 將控制彈框顯示的dialogVisible設置爲true，讓彈框顯示
    this.dialogVisible = true;
    // 設置currentIndex
    this.currentIndex = index;
},

　　而後截圖看一下步驟④中的打印信息：

　　

 　　能夠看到，<el-upload>的file-list綁定的currentAttachList是包含兩個元素（其中包含第③步刪除的那個），可是文件列表卻只顯示了一個。

　　enmmmmmm，這個地方比較費解。

　　咱們先處理第六個步驟中刪除出現的異常顯示。根據咱們前面的梳理的邏輯，須要作兩個修改

　　methods添加handleRemove函數處理刪除數據的功能

　　<el-upload>添加on-remove鉤子函數調用handleRemove

1.<el-upload>添加on-remove鉤子函數調用handleRemove

 <el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-remove="handleRemove"
  :file-list="currentAttachList"
  :on-success="uploadSuccess">
  <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>

2.methods添加handleRemove函數處理刪除數據的功能

　　關於handleRemove函數要實現的功能，前面咱們已經講過：當刪除一張圖片後，刪除對應的tableData.attachList中的數據。

　　關於這個功能有兩個辦法能夠實現:

　　　　①遍歷tableData.attachList中的文件信息，將須要刪除的文件刪除。

　　　　②on-remove鉤子函數在調用時有兩個參數：file和fileList。

　　　　　　　file就是咱們當前操做的文件，對於刪除操做，file就是當前刪除文件的信息；

　　  　　　　 fileList是操做完成後<el-upload>控件的的全部文件列表。

　　所以，可直接將fileList賦值給tableData.attachList。

　　咱們分別使用兩種辦法去實現。

　　方法一：遍歷tableData.attachList中的文件信息，將須要刪除的文件刪除

handleRemove(file, fileList){
  var currentIndex = this.currentIndex;
  var attachList = this.tableData[currentIndex].attachList;
  var tempList = [];
  for(var i = 0; i<attachList.length; i++){
    if(file.name != attachList[i].name){
      tempList.push(attachList[i]);
    }
  }
  this.tableData[currentIndex].attachList = tempList;
}

　　方法二：直接將on-remove鉤子函數的參數fileList賦值給tableData.attachList

handleRemove(file, fileList){
    var currentIndex = this.currentIndex;
    this.tableData[currentIndex].attachList = fileList;
}

　　能夠任意選擇一種實現，效果均相同

　　

四.功能完善—驗證文件名是否重複

　　element的多文件上傳控件對重複的文件名並無任何限制。

　　

　　這個也不符合咱們實際的開發場景。所以咱們須要完善這個功能。

　　查看element文檔，咱們能夠看到一個before-upload鉤子函數

　　

 　　所以咱們能夠給<el-upload>控件添加before-upload鉤子函數，在上傳文件以前去判斷文件是否重名，如有重名則阻止上傳。

1.給<el-upload>控件添加before-upload鉤子函數

 

 <!-- 將<el-upload>代碼添加到<el-dialog>代碼塊中 -->
<el-upload
   class="upload-demo"
   drag
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-remove="handleRemove"
   :file-list="currentAttachList"
   :on-success="uploadSuccess"
   :before-upload="beforeUpload">
  <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>

 

2.methods定義beforeUpload函數

beforeUpload(file){
  var currentIndex = this.currentIndex;
  //首先須要獲取當前已經上傳的文件列表
  var list = this.tableData[currentIndex].attachList;
  //循環文件列表判斷是否有重複的文件
  for(var i = 0;i<list.length;i++){
    if(list[i].name == file.name){
      this.$message.error(file.name + '文件名重複');
      //記得必定要返回false,不然控件繼續會執行上傳操做
      return false;
    }
  }
}

　　如今看下效果：

　　

　　能夠看到當文件名稱重複時，會有一個錯誤提示而且成功阻止了這個重複文件的上傳。

　　然而，當咱們在此查看文件列表時，發現以前存在的文件在列表中丟失了。

　　這個緣由是爲啥呢？由於當bfeore-upload返回false以後，該組件會默認執行before-remove和on-remove這個兩個鉤子函數，咱們在使用這個控件的時候只添加了on-remove這個鉤子函數，爲了證明這個默認行爲，咱們把before-remove這個鉤子函數加上，而且在添加一些打印信息。

　　添加before-remove鉤子函數

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :file-list="currentAttachList"
  :on-success="uploadSuccess"
  :before-upload="beforeUpload">
  <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>

　　methods添加beforeRemove和一些打印信息

beforeRemove(file, fileList){
  console.log('我是before-remove鉤子函數，我被調用了');
},
 handleRemove(file, fileList){
   console.log('我是on-remove鉤子函數，我被調用了');
   var currentIndex = this.currentIndex;
   var attachList = this.tableData[currentIndex].attachList;
   var tempList = [];
   for(var i = 0; i<attachList.length; i++){
     if(file.name != attachList[i].name){
       tempList.push(attachList[i]);
     }
   }
   this.tableData[currentIndex].attachList = tempList;
 },

 

　　而後就剛剛上傳重複文件的那個操做咱們看下打印信息

　　

 

　　能夠看到咱們前面的說法已經被證明了。

　　同時，在深刻一步思考一下，由於阻止上傳重複的文件名，致使on-remove鉤子函數被調用刪除了對應tableData.attachList中的數據，因此當咱們在此點擊查看文件列表時【皇阿瑪問號.jpg】已經不存在了。

　　那如何解決這個問題呢？

　　首先咱們先將before-remove這個鉤子函數完善一下：刪除前給用戶提示確認是否刪除

beforeRemove(file, fileList){
  return this.$confirm('此操做將永久刪除' + file.name +'文件, 是否繼續?');
},

　　而後，解決這個問題的關鍵是：當before-upload返回false後，不執行before-remove和on-remove這兩個鉤子函數裏面的邏輯。

　　那咱們看一下關於before-remove鉤子函數的文檔

　　

　　能夠看到，該鉤子函數能夠經過返回false中止刪除，便可以阻止on-remove函數的調用。

　　因此咱們將思路轉到before-remove函數，只要能在before-remove裏面作出一些判斷，在上傳重複的文件後使函數返回false。

　　那麼如今須要作的就是在before-upload中得知上傳了重複文件後，設置isRepeat標誌值爲true，在before-remove判斷若是isRepeat這個標誌值爲true，就令該鉤子函數返回false阻止on-remove函數的調用。

data () {
  return {
    //是否包含重複的文件名稱,默認不包含值爲false
    isRepeat: false 
  } 
}, 
methods: {
  beforeRemove(file, fileList){
    if(this.isRepeat == false){
      return this.$confirm('此操做將永久刪除' + file.name +'文件, 是否繼續?');
    }else{
      // 這個邏輯表示包含重複的文件，這按照文檔返回false可阻止文件繼續上傳
      return false;
    }
  },
  beforeUpload(file){
    var currentIndex = this.currentIndex;
    //首先須要獲取當前已經上傳的文件列表
    var list = this.tableData[currentIndex].attachList;
    //循環文件列表判斷是否有重複的文件
    for(var i = 0;i<list.length;i++){
      if(list[i].name == file.name){
        this.$message.error(file.name + '文件名重複');
        //添加邏輯：得知上傳了重複文件後，設置一個標誌值爲true，提供給beforeRemove函數使用
        this.isRepeat = true;
        //記得必定要返回false,不然控件繼續會執行上傳操做
        return false;
      }
    }
  }
}

　　而後咱們看下效果：

　　

　　這個結果看到以後有些吐血。

　　雖然當有重複文件上傳時有了錯誤提示，可是這個重複發文件名卻展現在了文件列表中。查看了打印信息，發現並無調用on-remove鉤子函數。

　　（這個文件上傳控件這麼雞肋嗎？仍是我用法有誤？）

　　沒辦法，也不知道啥緣由，我只能在想一想辦法。

　　在轉了轉腦子，因而想嘗試把before-remove中 else{ return false;}邏輯刪除，這樣當文件名稱重複後，會自動調用on-remove鉤子函數，咱們把對isRepeat數據的判斷加在on-remove鉤子函數中去阻止刪除操做。

beforeRemove(file, fileList){
  if(this.isRepeat == false){
    return this.$confirm('此操做將永久刪除' + file.name +'文件, 是否繼續?');
  }
},
handleRemove(file, fileList){
  console.log('我是on-remove鉤子函數，我被調用了');
  if(this.isRepeat == false){
    var currentIndex = this.currentIndex;
    var attachList = this.tableData[currentIndex].attachList;
    var tempList = [];
    for(var i = 0; i<attachList.length; i++){
      if(file.name != attachList[i].name){
        tempList.push(attachList[i]);
      }
    }
    this.tableData[currentIndex].attachList = tempList;
  }
 },

　　再看下效果：

　　

　　如今看起來這個效果是正常了，重複的文件沒有上傳也沒有展現到文件列表中，在此點擊查看也顯示正常。

　　可是呢，還有最後一個問題，保證是最後一個問題了：

　　　　由於當文件重複後，isRepeat設置爲了true，以後在沒有地方修改這個數據，那麼一個重複圖片上傳後，咱們操做刪除文件，此時isRepeat設置爲true，按照邏輯before-remove中的刪除提示不會執行，on-remove中的刪除邏輯也不會執行。

　　因此呢，咱們還須要在上傳重複圖片後，將this.isRepeat還原爲false，那麼咱們將代碼添加到on-remove函數中便可。

handleRemove(file, fileList){
  console.log('我是on-remove鉤子函數，我被調用了');
  if(this.isRepeat == false){
    var currentIndex = this.currentIndex;
    var attachList = this.tableData[currentIndex].attachList;
    var tempList = [];
    for(var i = 0; i<attachList.length; i++){
      if(file.name != attachList[i].name){
        tempList.push(attachList[i]);
      }
    }
    this.tableData[currentIndex].attachList = tempList;
  }else{
    this.isRepeat = false;
  }
 },

　　最後咱們將打印信息刪除，貼上完整的代碼

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 slot-scope="scope">
            <!-- 上傳按鈕綁定click事件 -->
            <el-button size='small' type="primary" @click="uploadBtnClick(scope.$index)">
              上傳
              <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%">
          <!-- 將<el-upload>代碼添加到<el-dialog>代碼塊中 -->
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="currentAttachList"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload">
            <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,
     // 設置當前文件列表數據currentAttachList，每次用戶點擊上傳按鈕，該數據就會被賦值爲當前按鈕那一列tableData中的attachList數據
      currentAttachList: [],
      //當前點擊打開彈框的按鈕在表格中是那一列
      currentIndex: 0,
      //是否包含重複的文件名稱,默認不包含值爲false
      isRepeat: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路',
        attachList:[]
      }]
    } 
  },
  methods: {
    uploadBtnClick (index){
      // 獲取上傳按鈕對應那一列表格數據中的附件列表，賦值給currentAttachList
      this.currentAttachList = this.tableData[index].attachList;
      // 將控制彈框顯示的dialogVisible設置爲true，讓彈框顯示
      this.dialogVisible = true;
      // 設置currentIndex
      this.currentIndex = index;
    },
    uploadSuccess(response, file, fileList){
      var currentIndex = this.currentIndex;
      this.tableData[currentIndex].attachList.push({
        'name':file.name
      });
    },
    beforeRemove(file, fileList){
      if(this.isRepeat == false){
        return this.$confirm('此操做將永久刪除' + file.name +'文件, 是否繼續?');
      }
    },
    handleRemove(file, fileList){
      if(this.isRepeat == false){
        var currentIndex = this.currentIndex;
        var attachList = this.tableData[currentIndex].attachList;
        var tempList = [];
        for(var i = 0; i<attachList.length; i++){
          if(file.name != attachList[i].name){
            tempList.push(attachList[i]);
          }
        }
        this.tableData[currentIndex].attachList = tempList;
      }else{
        this.isRepeat = false;
      }
    },
    beforeUpload(file){
      var currentIndex = this.currentIndex;
      //首先須要獲取當前已經上傳的文件列表
      var list = this.tableData[currentIndex].attachList;
      //循環文件列表判斷是否有重複的文件
      for(var i = 0;i<list.length;i++){
        if(list[i].name == file.name){
          this.$message.error(file.name + '文件名重複');
          //添加邏輯：得知上傳了重複文件後，設置一個標誌值爲true，提供給beforeRemove函數使用
          this.isRepeat = true;
          //記得必定要返回false,不然控件繼續會執行上傳操做
          return false;
        }
      }
    }
  }
}
</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;
}
#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%;
}
#app .el-upload-list li{
  transition: none;
}
</style>
<style scoped>
#app .my-table{
  display: inline-block;
  border: 1px solid #EBEEF5;
}
</style>

 

　　最後在來操做一波

　　

 　　

五.總結

　　到此，《使用element的upload組件實現一個完整的文件上傳功能》完成，該功能是結合前段時間在實際項目開發中作的一個功能，在這裏單獨拿出來總結。

　　在整個實踐過程當中，我的感受element的upload組件，對多文件的上傳功能仍是不太友好，兩個至今尚未探究明白的問題，在文中也以紅色字體標出。

　　這兩個問題雖然看着不影響什麼，但內心老是有些不踏實。

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程