equipment/src/components/SliceUpload/index.vue

<!-- 上传组件 支持分片上传-->
<template>
  <div>
    <div v-if="drag">
      <el-button v-if="fileName" type="warning" icon="el-icon-view" size="medium" style="margin: 5px auto;" @click="common.viewRawRecords(renwuId)">
        预览{{ title }}
      </el-button>
      <el-upload
        action=""
        :accept="type === 'rawrecords' ? 'application/pdf' : 'application/msword'"
        :http-request="handleUploadRequest"
        :show-file-list="false"
        class="upload-demo"
        drag
      >
        <el-alert v-if="fileName" type="success" :closable="false" center>
          <template slot="title">
            <div>
              <svg-icon icon-class="pdf" style="width: 67px;height: 50px;margin: 40px 0 16px;" /><br>
              将文件拖到此处，或<em>点击上传</em><br>
              {{ title }}：{{ fileName }}<br><br>
            </div>
          </template>
        </el-alert>
        <el-alert v-else type="warning" :closable="false" center>
          <template slot="title">
            <div style="align: center">
              <i class="el-icon-upload" /><br>
              将文件拖到此处，或<em>点击上传</em><br>
              {{ title }}：未上传<br><br>
            </div>
          </template>
        </el-alert>
      </el-upload>
    </div>
    <el-upload
      v-else
      action=""
      accept="application/pdf"
      :http-request="handleUploadRequest"
      :show-file-list="false"
    >
      <el-button :title="'上传' + title" circle size="medium" type="primary" icon="el-icon-upload" />
    </el-upload>
    <el-dialog title="上传进度" width="20%" :visible.sync="progressDialog" :modal="false" :show-close="false" :close-on-click-modal="false">
      <el-progress type="circle" :percentage="progressNum" />
    </el-dialog>
  </div>
</template>

<script>
import { uploadByPieces } from '../../utils/sliceFile'
export default {
  name: 'SliceUpload',
  props: {
    renwuId: {
      required: true,
      type: Number
    },
    drag: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'rawrecords'
    }
  },
  data() {
    return {
      fileName: '',
      fileList: [],
      progressNum: 0,
      progressDialog: false,
      loading: {},
      title: ''
    }
  },
  watch: {
    fileList() {
      this.$nextTick(() => {
        this.dealUpload()
      })
    }
  },
  created() {
    switch (this.type) {
      case 'rawrecords':
        this.title = '原始资料'
        break
      case 'ylgdyjfj':
        this.title = '附件'
        break
      default:
        break
    }
    if (this.drag && this.renwuId) {
      // 根据路径存在与否判断是否存在原始资料pdf文件
      this.preview({
        url: '/download/pullRawRecordsPath',
        method: 'get',
        params: { renwuId: this.renwuId }
      }).then(data => {
        if (data) {
          this.fileName = data.fileName
        }
      })
    }
  },
  methods: {
    // 上传请求
    handleUploadRequest(back) {
      this.loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: '',
        background: 'rgba(0, 0, 0, 0.1)'
      })
      this.fileList.push(back.file)
    },
    // 处理上传文件
    dealUpload() {
      if (this.fileList.length === 0) return
      this.progressDialog = true
      const that = this
      uploadByPieces({
        files: this.fileList,
        pieceSize: 5,
        chunkUrl: '/upload/chunkFile',
        fileUrl: '/upload/mergeFile',
        renwuId: this.renwuId,
        type: this.type,
        progress: (num) => {
          that.progressNum = num
        },
        success() {
          that.$message.success('上传成功。')
          that.progressDialog = false
          that.progressNum = 0
          that.fileName = that.fileList[0].name
          that.fileList = []
          that.loading.close()
        },
        error() {
          that.progressDialog = false
          that.progressNum = 0
          that.fileList = []
          that.loading.close()
        }
      })
    }
  }
}
</script>