技術標籤：element-uielementel-upload上傳元件

<template>
  <div class="fileUpload">
    <!--
      元件使用：
      1、結構
        <file-upload ref="uploadCom" @successHandle="fileUploadComplete" />

        <el-button @click="uploadFile">上傳檔案</el-button>
      2、邏輯
        /* 上傳圖片 */
        uploadFile: function () {
          this.$refs.uploadCom.$refs['el-upload'].submit()
        },
        /* 圖片上傳成功後回撥 */
        fileUploadComplete: function (data) {
          console.log('檔案上傳成功，檔案路徑集合', data)
        }
    -->
    <el-upload
      list-type="picture-card"
      ref="el-upload"
      :disabled="disabled"
      :action="uploadUrl"
      :file-list="fileListOrg"
      :multiple="fileConfig.multiple"
      :headers="fileConfig.headers"
      :limit="fileConfig.limit"
      :data="fileConfig.data"
      :auto-upload="fileConfig.autoUpload"
      :on-change="fileChange"
      :on-success="fileSuccess"
      :on-remove="fileRemove"
      :on-error="fileError"
      :on-exceed="limitNum"
    >
      <i slot="default" class="el-icon-plus">上傳</i>
    </el-upload>
  </div>
</template>

<script>
// import {map} from '../api/map.js'
export default {
  name: 'fileUpload',
  props: {
		imgUrl: { // 圖片會顯示時，路徑集合
			type: Array
		}
	},
  data () {
    return {
      fileSuccessNum: 0, // 多個檔案時，上傳成功的檔案數量
      disabled: false, // 是否禁用上傳元件，只做展示
      uploadUrl: '', // 上傳伺服器地址
      fileListOrg: [], // 檔案原列表（本地檔案）
      fileListCurrent: [], // 檔案上傳成功後，儲存檔案
      fileUrlArr: [], // 檔案上傳成功後，儲存檔案路徑
      fileConfig: { // 檔案上傳相關配置
        multiple: false,
        limit: 5,
        headers: {},
        data: {}, // 上傳額外引數
        /* // 測試資料
        headers: {
          token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtb2JpbGUiOiI0ODEiLCJleHAiOjE2MTE4MTI4MzR9.X5zyf6jvuSbt6gBUkkkcQ2zbmQDZ3jL_4MS5InnTOyc'
        },
        // 測試資料
        data: {
          oldUrl: ''
        }, */
        autoUpload: false
      }
    }
  },
  created:function(){
    if (this.imgUrl.length) {
      this.showImg(this.imgUrl)
    }
  },
  methods:{
    showImg:function(imgUrl){
      let showList = []
      let urlList = []
      for (let i = 0;i < imgUrl.length;i++) {
        showList.push({
          uid: new Date().getTime() + i,
          name: imgUrl[i],
          status: 'done',
          url: imgUrl[i],
          size: 666666,
          fileType: ''
        })
        urlList.push(imgUrl[i])
      }
      this.fileListOrg = showList
      this.fileUrlArr = urlList
      this.fileSuccessNum = imgUrl.length
    },
    fileChange: function (file, fileList) {
      this.fileListOrg = fileList
    },
    fileSuccess:function(res, file, fileList) {
      if (res.errcode == 10000) {
        // 上傳成功
        this.fileUrlArr.push(res.data.path)
        this.fileSuccessNum ++

        this.fileListOrg.forEach((item, inx) => {
          if (file.name == item.name) {
            file.url = res.data.path
            this.$set(this.fileListOrg, inx, file)
          }
         })
        if (this.fileSuccessNum == this.fileListOrg.length) {
          this.$emit('successHandle', this.fileUrlArr)
        }
      }
    },
    fileRemove:function(file, fileList) {
      this.fileListOrg = fileList

      this.fileUrlArr = this.fileUrlArr.filter(item => file.url != item)
      this.fileSuccessNum = this.fileUrlArr.length
    },
    fileError:function(e) {
      console.log('檔案上傳出錯！')
    },
    limitNum: function () {
      this.$message({
        message: `最多可上傳${this.fileConfig.limit}張圖片`,
        type: 'error'
      })
    }
  },
}
</script>

<style scoped>

</style>