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

本文最主要参考的是这一篇，后端也是用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

相关代码和文档：

https://github.com/ClearlightY/FileUpload

https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader

https://github.com/simple-uploader/Uploader

来源：https://blog.csdn.net/qq_41996454/article/details/125148861