Vue上傳材料（使用Element Upload組件）

之前寫了使用input上傳材料的方法，這次分享一下自己對使用Elemen Upload組件進行上傳材料的理解。

本身比較喜歡使用Element upload組件的照片牆來上傳材料。有以下幾個優點：

1.可以多張上傳

2.可以很清楚的看到所上傳的材料

3.可以很清楚的觀察上傳時的狀態

4.文件列表移除單獨文件及放大預覽等優點

如果使用input的方法管實現一個預覽功能就很麻煩，所以還是很看好Element的這個組件，平時也很喜歡去使用。

首先分享一下我用Upload組件的代碼：

 　　<el-upload

          ref="upload"

          :on-success="handleAvatarSuccess"

          :data="uploadImgData"

          :on-preview="handlePictureCardPreview"

          :on-remove="handleRemove"

          :action= "action"

          list-type="picture-card"

        >

          <i class="el-icon-plus" />

        </el-upload>

      </el-form-item>

　　<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" width="50%" >

      <el-image :src="dialogImageUrl" width="100%" />

    </el-dialog>

 

<script>

 

export default {

  props: {

    action: {

      type: String,

      default: '/upload/image'

    },

    uploadImgData: {

      type: Object,

      default: () => ({})

    }

  },

　data(){

　　return{

　　　　dialogVisible: false,

　　　　dialogImageUrl: '' 

　　}

}

　methods: {

　　handleRemove(file, fileList) {

　　　　console.log(fileList)

　　　　},

 　handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url

      this.dialogVisible = true

    },

　　}

}

</script>

 我們基本的代碼時這樣子的，有幾個點需要注意下的

1.action：是上傳文件的接口url，如我們寫的upload/image，看自己的接口是什么

2.data： data是上傳接口需要的header參數，需要給后端傳什么參數都可以在data里面定義

3.list-type:文件列表的類型有text，picture，picture-card等三個類型

4.on-preview：預覽功能，寫一個方法起控制一個對話框之類的顯示和隱藏

5.on-remove：刪除功能，upload組件可以上傳多張圖片，可以刪除鎖任意已經上傳的圖片（這里要注意一下，如果要用上傳接口，然后用到push到一個數組或者其他數據處理的，使用刪除方法時要注意下所處理的數據變化，去掉所刪除的圖片的數據）

其他相關屬性可以去看Element 文檔

還有就是，之前自己在實際開發當中遇到的問題：

如果上傳材料很大，還沒有上傳完成，這個是點擊提交了，如果沒有特殊處理，提交是可以成功的，但是圖片不會成功上傳（element組件上傳時的百分比不是很實用）

這個情況怎么處理？

此時我們給upload的組件 傳一個

:on-change="handleOnChange"

方法進去，去監聽uploa組件的change事件，data里面定義一個，然后去寫

handleOnChange(file, fileList) {
      this.uploadData = fileList
    },

提交的方法里寫個一個這個判斷：

if (this.uploadData.some(item => !item.response)) {
        this.$message.error('材料加載未完成')
        return
      }

因為，如果材料沒有上傳完成的話onchange里面的fileList里面的元素不會包含response對象，我們就利用這點去判斷就可以解決了。