Gridea

记 公司开发需要切片上传

index.vue

        <template>
            <div class="page-header-index-wide page-slice-upload">
                <a-spin :spinning="loading">

                <input class="hidden" type="file" @change="onChange" ref="fileInput" v-if="!accept"/>
                <input class="hidden" type="file" @change="onChange" ref="fileInput" v-else/>

                <a-button @click="selectFile" v-if="!file.name"> <a-icon type="upload" />点击上传</a-button>
                <a-button v-if="file.name && percent != 100">正在上传</a-button>
                <a-button v-if="file.name && percent == 100">上传完成</a-button>

                <div class="flex-box flex-h-ce hidden">
                    <div>
                    <a @click="selectFile">
                        {{file.name}}
                    </a>
                    </div>

                    <div>
                    <a-popover title="" placement="right">
                        <template slot="content">
                        <p>点击文件名称更改文件</p>
                        </template>
                        <a-button type="primary" class="margin-l-10">注</a-button>
                    </a-popover>
                    </div>
                </div>

                <div class="padded-t-20">
                    <a-progress v-if="file.name" style="width: 50%;" :percent="percent" status="active" />
                </div>

                </a-spin>
            </div>
            </template>

方法

selectFile() {
      this.$refs.fileInput.click();
    },
    async onChange() {
      let self = this;
      let file = this.$refs.fileInput.files[0];

      if (!file) return;
      this.file = file;

      this.loading = true;

      // 这里我们将切片固定成五分，也可以固定大小上传
      let axiosArray = [];
      let chunkList = [];
      let chunkSize = file.size / 5;
      let current = 0;
      let i = 0;
      let currentTime = new Date().getTime();
      let fileName = currentTime + "_" + file.name;

      while (current < 5) {
        chunkList.push({
          chunk: file.slice(current * chunkSize, (current + 1) * chunkSize),
          fileName: current + "_" + currentTime
        });
        current++;
      }
      console.log(chunkList,'current,,,,')

      for(var j=0; j<chunkList.length;j++){
        let formData = new FormData();
        formData.append("file", chunkList[j].chunk);
        formData.append("fileName", chunkList[j].fileName);
        let data = await self.$store.dispatch({
          type: 'dictionary/sliceUpload',
          data: formData
        });

        this.percent = (100 / current) * (j + 1);

        if(data && j == (chunkList.length - 1)) {
          let content = await self.$store.dispatch({
            type: 'dictionary/sliceUploadFinished',
            data: {
              fileName,
              requestType: 'raw'
            }
          });
          this.loading = false;
          if(!content) return;

          if(!this.isClose) {
            this.file = {};
            this.percent = 0;
          }

          this.$emit('uploadFile', content, file);
        }
      }
    },