vue2中基于vue-simple-upload实现文件分片上传组件功能

2024-07-28 19:09:32

本文最主要参考的是这一篇，后端也是用django来完成。

大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://www.jb51.net/article/206178.htm

参考的代码地址：https://github.com/ClearlightY/FileUpload

vue-simple-upload文档：https://github.com/simple-uploader/Uploader

<template>
  <div id='global-uploader'>
    <uploader
      ref='uploader'
      :options='options'
      :autoStart='false'
      :file-status-text='statusText'
      @file-added='onFileAdded'
      @file-success='onFileSuccess'
      @file-progress='onFileProgress'
      @file-error='onFileError'
      @file-removed='onfileRemoved'
      class='uploader-app'
    >
      <uploader-unsupport></uploader-unsupport>

      <!-- 文件拖拽上传区域-->
      <uploader-drop id='global-uploader-drop'>
        <uploader-btn id='global-uploader-btn' :attrs='attrs' ref='uploadBtn'>
          <div class='hzs-upload-icon'>
            <svg viewBox='0 0 1024 1024' data-icon='inbox' width='1em' height='1em' fill='currentColor'
                 aria-hidden='true'
                 focusable='false' class=''>
              <path
                d='M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0 0 60.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z'></path>
            </svg>
          </div>
          <p class='hzs-upload-title'>Click or drag file(.zip) to this area to upload datasets</p>
          <p class='hzs-upload-description'>Just support for a single file, multiple uploads will be overwritten by the
            latter.</p>
        </uploader-btn>
      </uploader-drop>

      <!--文件列表-->
      <uploader-list>
        <div class='file-panel' slot-scope='props'>
          <ul class='file-list' ref='fileList'>
            <li v-for='file in props.fileList' :key='file.id'>
              <uploader-file :class="'file_' + file.id" ref='files' :file='file' :list='true'></uploader-file>

              <!--              <!&ndash; 不重要的&ndash;>-->
              <!--              <div class='query_check' v-if='queryBtnShow'>-->
              <!--                <button @click='queryCheck(uuid)'>校验查询</button>-->
              <!--                <!&ndash; <input type="button" v-on="queryCheck(uuid)" value="校"/> &ndash;>-->
              <!--                <!&ndash; <div v-if="queryCheckStatus">文件正在上传中</div> &ndash;>-->
              <!--                <span class='queryCheckShow' v-if='queryCheckShow'>{{ checkStatus }}</span>-->
              <!--              </div>-->
              <!--              <div class='save-result' v-if='saveBtnShow'>-->
              <!--                <button @click='download_check_result(file_path)'>校验保存</button>-->
              <!--              </div>-->

            </li>
            <div class='no-file' v-if='!props.fileList.length'>
              Empty
            </div>
          </ul>
        </div>
      </uploader-list>
    </uploader>

  </div>
</template>
<script>
import SparkMD5 from 'spark-md5'
import { ACCEPT_FILE_CONFIG } from '@/config/defaultSettings'
import { checkResult, isFileExist, mergeFile, textCheck } from '@/api/uploadTool'
// import storage from 'store'

// https://github.com/simple-uploader/Uploader#events
export default {
  data() {
    return {
      options: {
        target: '/api/upload/upload/', // 目标上传URL
        testChunks: true,
        chunkSize: '2048000',
        // chunkSize: "10240000", // 分块时按该值来分
        fileParameterName: 'file', // 上传文件时文件的参数名
        maxChunkRetries: 3, // 最大自动失败重试上传次数

        // 由于我自身业务原因, 添加了校验查询功能, 查询的时候不能控制
        // 对应上传文件的id, 因此,去掉了多文件上传
        // 这里注释掉, 就可以实现多文件上传了
        // singleFile: true, // 单文件上传

        // 上传分片前, 会先向后端发送一个get请求, 该函数就是响应这个get请求
        checkChunkUploadedByResponse: function(chunk, message) {
          console.log('上传分片前, 会先向后端发送一个get请求, 该函数就是响应这个get请求')
          console.log(chunk)
          console.log(message)
          let objMessage = JSON.parse(message)
          console.log('objMessage:', objMessage)

          //---------秒传说明------------
          // 此处解开注释, 配合后端传来的参数可以实现秒传, 我因为上传后还需要进行校验请求,
          // 这里我就砍掉秒传功能了..
          //-----------------------------
          // 此处根据返回值来判断是否为秒传
          // if (objMessage.skipUpload === "true") {
          //   return true;
          // }
          // 根据返回的数组内容来判断哪些分片不需要重新上传
          return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
        },
        parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
          return parsedTimeRemaining
            .replace(/\syears?/, 'years')
            .replace(/\days?/, 'days')
            .replace(/\shours?/, 'hours')
            .replace(/\sminutes?/, 'minutes')
            .replace(/\sseconds?/, 'seconds')
        }
      },
      attrs: {
        accept: ACCEPT_FILE_CONFIG.getAll()
      },
      statusText: {
        success: 'success',
        error: 'network error',
        uploading: 'uploading',
        typeError: 'typeError',
        emptyError: 'emptyError',
        paused: 'paused',
        waiting: 'waiting',
        cmd5: 'calculate md5',
        merging: 'merging'
      },
      fileStatusText: (status, response) => {
        return this.statusText[status]
      },
      saveBtnShow: false,
      queryBtnShow: true,
      queryCheckShow: false,
      // queryCheckStatus: false,
      checkStatus: 'checking...',
      uuid: '',
      file_path: ''
    }
  },
  mounted() {
    // this.$bus.$on('openUploader', query => {
    //   this.params = query || {}
    //   if (this.$refs.uploadBtn) {
    //     document.querySelector('#global-uploader-btn').click()
    //   }
    // })
  },
  computed: {
    //Uploader实例
    uploader() {
      return this.$refs.uploader.uploader
    }
  },
  methods: {
    onFileAdded(file, event) {
      console.log(file)
      console.log(event)
      console.log(this.uploader.fileList)
      console.log(this.uploader.files)

      this.$emit('canGoToNextStep', false)
      this.$emit('canGoToPreStep', false)

      // console.log(this.uploader.files.length)
      //暂停文件上传
      file.pause()
      //

      // this.panelShow = true;
      this.queryCheckShow = false
      this.saveBtnShow = false
      this.queryBtnShow = false
      this.statusSet(file.id, 'md5')
      this.computedMD5(file)

      // setTimeout(() => {
      //   this.computedMD5(file)
      // }, 5000)

      // Bus.$emit("fileAdded");
      // console.log(this.uploader.files)
      // console.log(this.uploader.files.length)
    },

    onFileProgress(rootFile, file, chunk) {
      console.log(
        `uploading ${file.name}，chunk：${chunk.startByte /
        1024 /
        1024} ~ ${chunk.endByte / 1024 / 1024}`
      )
    },

    async onFileSuccess(rootFile, file, response, chunk) {
      console.log('onFileSuccess')
      console.log(file)
      let res = JSON.parse(response)
      file.success = true

      // 文件完成上传, 文件合并的标志
      if (res.needMerge === 'true') {
        this.statusSet(file.id, 'merging')
        let formData = new FormData()
        formData.append('filename', file.name)
        formData.append('identifier', arguments[0].uniqueIdentifier)
        formData.append('totalSize', file.size)
        formData.append('timeStamp', res.timeStamp)

        console.log('formData')

        try {
          // --------------------发送合并请求 start ---------------------
          let res = await mergeFile(formData)

          // 合并失败的处理
          // if (res.code !== 200) {
          //   this.$notification.error({
          //     message: 'Error',
          //     description: 'An error occurred during the inspection, please try again'
          //   })
          //   file.cancel()
          //   return
          // }

          // 文件上传成功 ui更新
          this.statusRemove(file.id)
          this.statusSet(file.id, 'success')

          // this.queryBtnShow = true
          // this.$bus.$emit('fileSuccess')
          // --------------------发送合并请求 end ---------------------

          // ---------------------发送请求 询问是否校验成功 start---------------
          // let formData2 = new FormData()
          // formData2.append('fpath', res.filePath)
          // formData2.append('fname', res.fileName)
          // let res2 = await textCheck(formData2)
          // if (res2.code !== 200) {
          //   this.$notification.error({
          //     message: 'Error',
          //     description: 'An error occurred during the inspection, please try again'
          //   })
          //   file.cancel()
          // }

          // this.uuid = res2.uuid
          // this.file_path = res2.file_path
          // ---------------------发送请求 询问是否校验成功 end---------------

          // this.statusRemove(file.id)
          // this.statusSet(file.id, 'finish checking')

          // 收集文件相关数据
          console.log(file)

          this.$store.commit('ADD_FILE_LIST', file)

          // 提示可以到下一步了
          this.$notification.success({
            message: 'Success',
            description: 'Successfully upload, go to next step to finish.'
          })

          this.$emit('canGoToNextStep', true)
          this.$emit('canGoToPreStep', true)

          // file.uniqueIdentifier

          // this.statusSet(file.id, "checking");

          //
          // //  -------------------定时发送请求,看检验是否完成 start-------------------
          // // 定时发送请求,看检验是否完成
          // let interval = setInterval(() => {
          //   setTimeout(async () => {
          //     let formData3 = new FormData()
          //     formData3.append('file_uuid', res2.uuid)
          //
          //     let res3 = await checkResult(formData3)
          //     console.log('校验中,请稍等...')
          //     if (res3.code == 200) {
          //       console.log('校验完成')
          //       clearInterval(interval)
          //       // this.statusRemove(file.id);
          //       // this.statusSet(file.id, "checkSuccess");
          //       this.checkStatus = 'finish checking'
          //       this.saveBtnShow = true
          //     }
          //   }, 0)
          // }, 1000)
          //
          // //  -------------------定时发送请求,看检验是否完成 end-------------------
        } catch (e) {
          this.$notification.error({
            message: 'Error',
            description: 'An error occurred during the inspection, please try again'
          })
          file.cancel()
        }
      }
    },

    onFileError(rootFile, file, response, chunk) {
      this.$notification.error({
        message: 'Error',
        description: 'Please try again'
      })
    },

    onfileRemoved(file) {
      this.$message.info(`${file.name} 's  upload had been canceled`)
    },

    /**
     * 计算上传文件的md5, 实现断点续传和秒传
     */
    computedMD5(file) {
      let fileReader = new FileReader()
      let time = new Date().getTime()
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice

      let currentChunk = 0
      const chunkSize = 10 * 1024 * 1000
      let chunks = Math.ceil(file.size / chunkSize)
      let spark = new SparkMD5.ArrayBuffer()

      // this.statusSet(file.id, 'md5')
      // $('.uploader-file-action').css('display', 'none');
      loadNext()

      fileReader.onload = e => {
        spark.append(e.target.result)

        currentChunk++
        if (currentChunk < chunks) {
          // console.log(
          //   `第${currentChunk}分片解析完成, 开始第${currentChunk +
          //   1} / ${chunks}分片解析`
          // )
          loadNext()

          // 实时展示MD5的计算进度
          setTimeout(() => {
            document.querySelector(`.myStatus_${file.id}`).textContent = 'verify MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
            // console.log(file.id)
            // console.log('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
            // console.log(document.querySelector(`.myStatus_${file.id}`))
            // document.querySelector(`.myStatus_${file.id}`).textContent = '校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
          }, 20)
        } else {
          let md5 = spark.end()
          this.computeMD5Success(md5, file)
          spark.destroy() // 释放缓存
          console.log(
            `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
              file.size
            } 用时：${new Date().getTime() - time} ms`
          )
        }
      }

      fileReader.onerror = function() {
        this.error(`文件${file.name}读取出错，请检查该文件`)
        file.cancel()
      }

      function loadNext() {
        let start = currentChunk * chunkSize
        let end =
          start + chunkSize >= file.size ? file.size : start + chunkSize

        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
      }
    },

    // 计算md5成功
    async computeMD5Success(md5, file) {
      file.uniqueIdentifier = md5 // 将文件md5赋值给文件唯一标识
      this.statusRemove(file.id)
      // file.resume()
      console.log('computeMD5Success')
      console.log(file)
      // 把md5校验结果传到后端 检查是否存在这个文件

      let that = this
      try {
        let res = await isFileExist({
          md5,
          fileName: file.name
        })
        if (res.status) {
          // 文件未在s3存在的情况
          if (res['is_exist'] === false) {
            this.$confirm({
              title: 'Are you sure to upload it?',
              content: h => res.message,
              okText: 'yes',
              onOk() {
                // 开始文件上传的一个动作
                // 将表单里的是否强制上传设置为false
                file['is_force_process'] = false
                file.resume()
              },
              onCancel() {
                that.$emit('canGoToPreStep', true)
                file.cancel()
              }
            })
          } else {
            // 是否需要强制上传
            this.$confirm({
              title: 'The file had existed, are you sure to recover it?',
              content: h => res.message,
              okText: 'yes',
              onOk() {
                // 开始文件上传的一个动作
                // 将表单里的是否强制上传设置为false
                file['is_force_process'] = true
                file.resume()
              },
              onCancel() {
                that.$emit('canGoToPreStep', true)
                file.cancel()
              }
            })

          }
        } else {
          file.cancel()
        }
      } catch (e) {
        file.cancel()
      }
    },

    // 展示文件列表
    // fileListShow() {
    //   // let $list = $('#global-uploader .file-list')
    //   let $list = this.$refs.fileList
    //
    //   if ($list.is(':visible')) {
    //     $list.slideUp()
    //   } else {
    //     $list.slideDown()
    //   }
    // },

    close() {
      this.uploader.cancel()
    },

    /**
     * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
     * @param id
     * @param status
     */
    statusSet(id, status) {
      let statusMap = {
        md5: {
          text: 'verify MD5',
          bgc: '#fff'
        },
        merging: {
          text: 'merging',
          bgc: '#e2eeff'
        },
        transcoding: {
          text: 'transcoding',
          bgc: '#e2eeff'
        },
        failed: {
          text: 'fail to upload',
          bgc: '#e2eeff'
        },
        success: {
          text: 'successfully upload',
          bgc: '#e2eeff'
        },
        checking: {
          text: 'checking',
          bgc: '#e2eeff'
        },
        checkSuccess: {
          text: 'check ok',
          bgc: '#e2eeff'
        }
      }

      setTimeout(() => {
        let p = document.createElement('p')
        p.className = `myStatus_${id}`
        let father = document.querySelector(`.file_${id} .uploader-file-status`)
        p.setAttribute('style', `position: absolute; top:-16px;left: 0;right: 0; bottom: 0;zIndex: 1; backgroundColor: ${statusMap[status].bgc}`)
        p.append(statusMap[status].text)
        father.appendChild(p)
      })
    },

    statusRemove(id) {
      // console.log("statusRemove")
      // console.log(id)
      this.$nextTick(() => {
        let node = document.querySelector(`.myStatus_${id}`)
        node.parentNode.removeChild(node)
      })
    },

    error(msg) {
      this.$notification.error({
        message: 'Error',
        description: msg
      })
    },

    // 查询每个区块
    queryCheck: function(uuid) {
      console.log('uuid::', uuid)
      console.log('file_path::--------', this.file_path)
      // if (uuid === "") {
      //   this.queryCheckStatus = true;
      //   return;
      // }
      let formData = new FormData()
      formData.append('file_uuid', uuid)
      const instance = this.$http.post({
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })

      instance
        .post('http://127.0.0.1:8000/fileUpload/check_result', formData)
        .then(res => {
          // console.log("点击了查询校验状态按钮");
          if (res.data.code == '200') {
            // this.queryCheckStatus = false;
            this.checkStatus = 'check ok'
            this.queryCheckShow = true
          } else {
            this.checkStatus = 'checking...'
            this.queryCheckShow = true
          }
        })
    },

    // 下载校验结果
    download_check_result() {
      let formData = new FormData()
      formData.append('file_path', this.file_path)
      const instance = this.$axios.create({
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        responseType: 'blob'
      })
      instance
        .post('http://127.0.0.1:8000/fileUpload/file_download', formData)
        .then(response => {
          if (!response) {
            return
          }
          let url = window.URL.createObjectURL(new Blob([response.data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', 'check-result.txt')

          document.body.appendChild(link)
          link.click()
        })
    }
  },
  watch: {},
  destroyed() {
    // this.$bus.$off('openUploader')
  }
}
</script>

<style scoped lang='less'>
#global-uploader {
  // position: fixed;
  z-index: 20;
  max-width: 1000px;
  margin: 10px auto;

  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 4);
  //padding: 10px;

  h2 {
    padding: 30px 0;
    text-align: center;
    font-size: 20px;
  }

  .uploader-app {
    //width: 880px;
    //padding: 15px;
    //margin: 20px auto 0;
    font-size: 14px;

  }

  ul li {
    list-style-type: none;
  }

  li div {
    //left: -19px;
  }
}

.file-panel {
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 7px 7px 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  .file-title {
    display: flex;
    height: 40px;
    // line-height: 40px;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;

    .operate {
      flex: 1;
      text-align: right;
    }
  }

  .file-list {
    position: relative;
    height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;
    //border: 1px solid black;
    padding: 0;

    > li {
      background-color: #fff;
    }
  }

  &.collapse {
    .file-title {
      background-color: #e7ecf2;
    }
  }
}

.no-file {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

.uploader-btn {
  margin-right: 4px;
  color: #fff;
  padding: 6px 16px;
}

#global-uploader-btn {
  //border: 1px solid #409eff;
  //background: #409eff;
  border: 0;
  width: 100%;
  //height: 100px;
  padding: 15px;
  color: #F5222D;
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    padding: 0;
    margin: 10px;
  }

  .hzs-upload-icon {
    font-size: 40px;
  }

  .hzs-upload-title {
    font-size: 20px;
  }

  .hzs-upload-description {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.45)
  }
}

#global-uploader-btn:hover {
  background: none;
}

#global-uploader-drop {
  //height: 150px;
  padding: 0;
}

#global-uploader-drop:hover {
  border: 1px dashed #F5222D;
}

#global-uploader-dir-btn {
  border: 1px solid #67c23a;
  background: #67c23a;
}

.save-result {
  position: absolute;
  margin-top: -24px;
  margin-left: 700px;
  z-index: 10;
}

.query_check {
  position: absolute;
  margin-left: 700px;
  margin-top: -50px;
  z-index: 10;
}

.queryCheckShow {
  margin-left: 10px;
  color: red;
  font-size: 12px;
}
</style>

调用

 <MyUploaderBox
      @canGoToNextStep='canGoToNextStep'
      @canGoToPreStep='canGoToPreStep'
 ></MyUploaderBox>

参考

vue实现分片上传 https://blog.csdn.net/AIfurture/article/details/103975897

字节跳动面试官：请你实现一个大文件上传和断点续传 https://juejin.cn/post/6844904046436843527

vue-simple-uploader组件的使用感受 https://www.jianshu.com/p/da8ad489095e

大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://blog.csdn.net/qq_36852780/article/details/107437875

vue2中基于vue-simple-upload实现文件分片上传组件功能

相关推荐

随机推荐