elementUI-upload

<template>
  <ui-row :gutter="20" class="p_botm">
    <ui-col :span="24">
      <p class="p_title">{{title}}({{num}}張)</p>
    </ui-col>
    <ui-col :span="24">
      <ui-upload
        class="avatar-uploader"
        action="/hechuang-erp/file/upload"// 上傳的接口
        :data="param"// 上傳時附帶的參數
        :show-file-list="true"// 在頁面顯示上的傳圖片
        list-type="picture-card"// 文件列表的類型 =>類型:text/picture/picture-card
        :limit="num"// 限制上傳的個數
        :on-exceed="handleExceed"// 超過限制個數時提醒用戶
        :on-success="handleAvatarSuccess"圖片上傳成功時返回(response, file, fileList) filr:存放返回的url
        :on-remove="deleteImgUrl"// 刪除圖時返回 (file, fileList) 獲取fileId
        :before-upload="beforeAvatarUpload"// 上傳圖片以前判斷類型和大小
        name="file">//  文件字段名 默認:file
        <img v-if="show" :src="src" class="avatar">// v-if ='false' 頁面纔會正常
        <i v-if="!show" class="el-icon-plus"></i>
      </ui-upload>
    </ui-col>
  </ui-row>
</template>

<script>
  import http from '@/api/user'
  export default {
    components: {},
    // 父組件構建dept對象傳入(內容id和deptName)
    props: ['getUserId', 'getTitle', 'getNum', 'getType'],
    methods: {
      handleAvatarSuccess(response, file, fileList) {
        this.src = file.url
      },
      handleExceed(files, fileList) {
        this.$message.warning(`當前限制選擇 ${this.num}個文件，本次選擇了 ${(files.length + fileList.length) - 1} 個文件，共選擇了 ${files.length + fileList.length} 次文件`)
      },
      deleteImgUrl(file, fileList) {
        console.info(file.response)
        if (file.response) {
          http
          .deleteImg(file.response.data.fileId).then(r => {
            this.$message({type: 'success', message: '刪除成功'})
          }).catch(r => {})
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error(`上傳${this.getTitle}圖片只能是 JPG 格式!`)
        }
        if (!isLt2M) {
          this.$message.error(`上傳${this.getTitle}圖片大小不能超過 2MB!`)
        }
        return isJPG && isLt2M
      }
    },
    mounted() {
    },
    data() {
      return {
        show: false,
        src: null,
        title: this.getTitle,
        num: this.getNum,
        arr: [],
        param: {
          userId: this.getUserId,
          fileType: this.getType
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .p_botm {
    padding-bottom: 10px;
  }
  .p_title {
    padding-bottom: 5px;
  }
</style>