图片分片上传|图片大图预览（element）

<template>
  <div class="dashboard-container">
    <div class="box">
      <div class="grid-content">
        <div class="pic-list">
          <img v-for="item in picList" :key="item.id" :src="item.thumbnail" class="pic" @click="onPreview(item.image)">
        </div>
        <el-pagination
          :current-page="currentPage"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
      <div>
        <div class="grid-content-right">
          <el-upload
            class="upload-demo"
            drag
            :file-list="uploadList"
            list-type="picture"
            action
            multiple
            :before-upload="(file)=>uploadImg(file)"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </div>
      </div>
    </div>
    <ElImageViewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcListView"
    />
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { uploadList } from '@/api/table'
import { getToken } from '@/utils/auth'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'Upload',
  components: {
    ElImageViewer
  },
  data() {
    return {
      picList: [],
      uploadList: [],
      total: 0,
      currentPage: 1,
      showViewer: false,
      srcListView: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getUploadList()
  },
  methods: {
    getUploadList() {
      uploadList({ token: getToken(), page: this.currentPage }).then(res => {
        this.picList = res.data.data
        this.currentPage = res.data.current_page
        this.total = res.data.total
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getUploadList()
    },
    onPreview(src) {
      console.log(src)
      this.srcListView = [src]
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    uploadImg(file) {
      var fileSize = file.size
      var chunkSize = 1024000 // 分片大小为1MB
      var totalChunks = Math.ceil(fileSize / chunkSize) // 计算总的分片数
      var chunkIndex = 0
      const inArrayIndex = this.uploadList.length
      this.uploadList.push({
        name: file.name,
        url: '',
        percentage: 0,
        status: 'uploading'
      })
      const uploadChunk = () => {
        var start = chunkIndex * chunkSize
        var end = Math.min(start + chunkSize, fileSize)
        var chunks = Math.floor(fileSize / chunkSize) // 计算总的分片数

        var chunk = file.slice(start, end) // 获取当前分片
        var fd = new FormData()
        fd.append('chunk', chunk) // 当前分片文件
        fd.append('chunkIndex', chunkIndex) // 当前分片编号
        fd.append('filename', file.name) // 文件名
        fd.append('filesize', fileSize) // 文件尺寸
        fd.append('project', 'BoschVideo') // 项目名，会指定的
        fd.append('chunks', chunks) // 总共的分片数

        // 发送请求
        var xhr = new XMLHttpRequest()
        xhr.open('POST', process.env.VUE_APP_BASE_API + '/smart/michelin/chunkUpload', true)
        xhr.onreadystatechange = (e) => {
          console.log('eeeeeee', e)
          if (e.target.status === 200 && e.target.readyState === 4) {
            var res = JSON.parse(e.target.response)
            if (res.code === 1) {
              chunkIndex++
              this.uploadList[inArrayIndex].percentage = (chunkIndex / totalChunks * 100).toFixed(0)
              if (chunkIndex < totalChunks) {
                uploadChunk() // 继续上传下一分片
              } else {
                this.uploadList[inArrayIndex].status = 'success'
                this.uploadList[inArrayIndex].url = res.data.thumbnail
                this.getUploadList()
              }
            } else {
              this.toast('上传失败，请重试')
            }
          }
        }
        xhr.send(fd)
      }
      new Promise(uploadChunk)
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .box{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .grid-content-right{
      width: 360px;
      min-height: 85vh;
      background: #f3f5f7;
    }
    .grid-content{
      flex: 1;
    }
    .pic-list{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .pic{
      width: 180px;
      margin: 5px;
    }
    .el-pagination{
      text-align: center;
    }

  }
}
</style>