自定義批量上傳一些邏輯

<template>
  <!-- 上傳彈窗 -->
  <el-dialog title="上傳文檔" width="648px"
      :close-on-press-escape="false" 
      :close-on-click-modal="false"
      :visible.sync="uploadDialogVisible" 
      :before-close="uploadCancel">
      <el-upload
        class="upload-component-content"
        drag
        action=""
        :http-request="uploadToServer"
        ref="upload"
        :auto-upload="false"
        :show-file-list="false"
        :on-progress="handleUploadProgress"
        :on-change="handleUploadChange"
        accept=".ppt,.pptx"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">將文件拖拽至此處，或<em>點擊選擇文件</em></div>
        <div class="el-upload__tip" slot="tip">支持上傳100MB以內的ppt、pptx文檔格式，一次最多上傳5個文件</div>
      </el-upload>

      <div class="upload-list-info" v-if="uploadListData.length>0">
        共{{uploadListData.length}}個：上傳成功 {{uploadSuccessCount}}  上傳失敗  {{uploadFailCount}}  上傳中 {{uploadingCount}}
      </div>

      <div class="upload-list" v-if="uploadListData.length>0 && !isNetworkDisconnect">
        <el-table :data="uploadListData" max-height="200" v-loading.body="uploadListLoading" element-loading-text="Loading">
          <el-table-column prop="name" width="200" :show-overflow-tooltip="true" label="文件名"></el-table-column>
          <el-table-column prop="size" label="大小">
            <template slot-scope="scope">
              {{scope.row.size | sizeFilter}}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="狀態">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 'uploading'">{{scope.row.percent}}%</span>
              <span v-else :class="{
                'error-color': scope.row.status === 'fail' || scope.row.status.includes('error'), 
                'success-color':  scope.row.status === 'success'}">
                {{scope.row.status | statusFilter()}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-link v-if="scope.row.status==='uploading'" type="danger" @click="cancelUploading(scope.row)" class="error-color" :underline="false">取消上傳</el-link>
              <el-link v-else title="移除" icon="el-icon-delete" @click="removeUploadFile(scope)" type="danger" 
                :underline="false">
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="upload-warning" v-if="uploadListData.length>0">
        <i class="el-icon-warning"></i>上傳期間請勿關閉本頁面，否則會上傳失敗。
      </div>

      <div slot="footer" class="dialog-footer" v-if="!uploadConfirmed">
        <el-button @click="uploadCancel()">取 消</el-button>
        <el-button type="primary" @click="uploadConfirm">確認上傳</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { uploadShareDoc } from '@/api/document'
import axios from 'axios'
export default {
  name: 'UploadDialog',
  props: ['visible','type','userId','conferenceId','conferenceNo'],
  data() {
    return {
      uploadDialogVisible:false,
      uploadListData:[],
      uploadListLoading:false,
      uploadConfirmed:false,
      cancelSourceData:[],
    }
  },

  watch: {
    visible: {
      handler(value) {
        this.uploadDialogVisible = value
        if(value) 
           this.uploadConfirmed = false
      },
      immediate: true
    } 
  },

  computed: {
    isNetworkDisconnect () {
      return this.$store.state.network.isNetworkDisconnect
    },

    uploadFailCount() {
      return this.uploadListData.filter(
        item => item.status === 'fail').length
    },

    uploadSuccessCount() {
      return this.uploadListData.filter(
        item => item.status === 'success').length
    },

    uploadingCount() {
      return this.uploadListData.filter(
        item => item.status === 'uploading').length
    },

    uploadTypeErrorCount() {
      return this.uploadListData.filter(
        item => item.status === 'type_error').length
    },

    uploadSizeErrorCount() {
      return this.uploadListData.filter(
        item => item.status === 'size_error').length
    }
  },

  filters: {
    sizeFilter(size) {
      if (size < 1024) {
          return size + 'B'
      } else if (size >= 1024 && size < Math.pow(1024, 2)) {
          return parseFloat(size / 1024).toFixed(2) + 'KB'
      } else if (size >= Math.pow(1024, 2) && size < Math.pow(1024, 3)) {
          return parseFloat(size / Math.pow(1024, 2)).toFixed(2) + 'MB'
      } else if (size > Math.pow(1024, 3)) {
          return parseFloat(size / Math.pow(1024, 3)).toFixed(2) + 'GB'
      } else {
          return 0 + 'B'
      }
    },
    statusFilter(status,) {
      if (status === 'success') {
        return '上傳成功'
      } else if (status === 'fail') {
        return '上傳失敗'
      } else if (status === 'type_error') {
        return '格式錯誤'
      } else if (status === 'size_error') {
        return '超出規定文件大小'
      } else {
        return '——'
      }
    }
  },

  methods: {
    /*********************  上傳處理  ***********************************/
    //上傳前文件格式、大小等校驗
    //上傳100MB以內的ppt、pptx文檔格式
    validUploadFiles(file) {
      const fileType = file.type || file.raw.type
      const isType = fileType.includes('application/vnd.ms-powerpoint') || fileType.includes('application/vnd.openxmlformats-officedocument.presentationml.presentation');
      const validResult = { status: 'success' }
      if (!isType) {
          if(file.name){
              let fileNameSplit = file.name.split('.');
              let suffix = fileNameSplit[ fileNameSplit.length - 1 ];
              if(!suffix.includes('pptx')){
                validResult.status = 'type_error'
              }
          }else{
              validResult.status = 'type_error'
          }
      }
      const isLt100M = file.size / 1024 / 1024
      if (isLt100M > 100) {
          validResult.status = 'size_error'
      }
      return validResult
    },

    uploadCancel() {
      if(this.uploadListData.length === 0) {
         this.$refs.upload.clearFiles()
         this.$emit('close')
         return
      }
      this.$confirm(`當前有文檔正在上傳，確認取消嗎?`, '上傳提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //取消上傳
          this.$refs.upload.abort()
          this.$refs.upload.clearFiles()
          this.cancelSourceData.forEach(
            item => item.source.cancel()
          )
          if(this.uploadSuccessCount>0) {
            this.$emit('upload-complete')
          }

          this.uploadListData = []
          this.cancelSourceData = []
          this.$emit('close')
        }).catch(() => {    
      }) 
    },

    //上傳中取消
    cancelUploading(row) {
      this.cancelSourceData.forEach((item,idx) => {
          if (item.uid === row.uid) {
            item.source.cancel('cancel')
            row.status = 'ready'
            this.updateUploadFile(row)
            this.cancelSourceData.splice(idx,1)
          }
        }
      )
    },
    //移除準備上傳的文件
    removeUploadFile(scope) {
      const choiceIndex = scope.$index
      if (choiceIndex > -1) this.uploadListData.splice(choiceIndex, 1)
    },

    uploadConfirm() {
      //上傳前網絡校驗
      if (this.isNetworkDisconnect) {
        this.$message.error('網絡異常，請檢測網絡後重新上傳')
        return
      } 

      const uploadReadyCount = this.uploadListData.filter(
        item => item.status === 'ready').length
      if(this.uploadListData.length === 0 || uploadReadyCount === 0) {
        this.$message.error('沒有待上傳的文件，請添加')
        return
      }

      //文件添加文件數量校驗 一次最多上傳5個文件
      if(this.uploadListData.length > 5) {
        this.$message.error('添加文件數量超出限制')
        return
      }

      //校驗文件 添加文件大小超出限制 添加文件格式錯誤
      this.uploadListData.map(fileItem => {
          const { status } = this.validUploadFiles(fileItem)
          if (status === 'type_error' || status === 'size_error') {
            fileItem.status = status
          }
          return fileItem
        }
      )
      if (this.uploadTypeErrorCount > 0) {
        this.$message.error('添加文件格式錯誤');
        return
      }
      if (this.uploadSizeErrorCount > 0) {
        this.$message.error('添加文件大小超出限制');
        return
      }
      
      this.uploadConfirmed = true
      this.$refs.upload.submit()
    },

    //更新列表數據
    updateUploadFile(file) {
      const idx = this.uploadListData.findIndex(item => item.uid === file.uid)
      this.uploadListData[idx] = file 
      this.$set(this.uploadListData,idx,file)
    },

    //上傳 回調
    handleUploadProgress(val, file, fileList) {
      file.percent = val
      this.updateUploadFile(file)
    },

    handleUploadChange(file, fileList) {
      if (file && file.status === 'ready') {
        this.uploadListData.push(file)
      }
    },

    //上傳到服務器
    uploadToServer(params) {
      if(params.file.status 
         && params.file.status !== 'ready') return

      const formData = new FormData();

      const materialParam = {
         ******
      }
      const json = JSON.stringify(materialParam);
      const blob = new Blob([json], {type: 'application/json'});
      formData.append('fileUpload', blob);
      formData.append('files', params.file)

      //進度條處理
      const uploadProgressHandler = ({ total, loaded }) => {
        const percent = (loaded / total) * 100
        params.onProgress(percent.toFixed(0))
      }

      //cancelToken處理
      let CancelToken = axios.CancelToken;
      let source = CancelToken.source();
      this.cancelSourceData.push({ source, uid: params.file.uid })

      api(formData, uploadProgressHandler,source.token).then(res => {
        if (res.code === 200) {
          params.file.status = 'success'
          this.updateUploadFile(params.file)
          this.uploadConfirmed = false
          if(this.uploadSuccessCount === this.uploadListData.length) {
            this.$message.success('上傳文檔完成')
            this.$emit('close')
            this.uploadListData = []
            this.$emit('upload-complete')
          }
        } else{
          params.file.status = 'fail'
          this.updateUploadFile(params.file)
          this.uploadConfirmed = false
          this.$message.error(res.msg || '上傳文檔失敗')
        }
      })
      .catch(err => {
        if (!err.message || err.message !== 'cancel') {
          params.file.status = 'fail'
          this.updateUploadFile(params.file)
          this.$message.error('上傳文檔失敗')
        }
        this.uploadConfirmed = false
        console.error(err)
      }) 
    },
  }
}
</script>