xc/utils/upload.js

import md5 from 'js-md5' //引入MD5加密
import { upload } from '@/api/upload.js'  // 这里指前端调用接口的api方法
import store from '@/store/index.js';
import { TOKENNAME,HTTP_REQUEST_URL } from '@/config/app';
export const uploadByPieces = ({ randoms, file, pieceSize = 2,pid, progress, success, error, uploading }) => {
    // 如果文件传入为空直接 return 返回
    if (!file) return
    let fileMD5 = ''// 总文件列表
    const chunkSize = pieceSize * 1024 * 1024 // 5MB一片
    const chunkCount = Math.ceil(file.size / chunkSize) // 总片数
    // 获取md5
    const readFileMD5 = () => {
        // 读取视频文件的md5
        let fileRederInstance = new FileReader()
        fileRederInstance.readAsBinaryString(file)
        fileRederInstance.addEventListener('load', e => {
            let fileBolb = e.target.result
            fileMD5 = md5(fileBolb)
            readChunkMD5()
        })
    }
    const getChunkInfo = (file, currentChunk, chunkSize) => {
        let start = currentChunk * chunkSize
        let end = Math.min(file.size, start + chunkSize)
        let chunk = file.slice(start, end)
        return { start, end, chunk }
    }
    // 针对每个文件进行chunk处理
    const readChunkMD5 = async () => {
        // 针对单个文件进行chunk上传
        for (var i = 0; i < chunkCount; i++) {
            const { chunk } = getChunkInfo(file, i, chunkSize)
            console.log("总片数" + chunkCount)
            console.log("分片后的数据---测试：" + i)
            await uploadChunk({ chunk, currentChunk: i, chunkCount })
        }
    }
    const uploadChunk = (chunkInfo) => {
        // progressFun()
        return new Promise((resolver, reject) => {
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            // 创建formData对象，下面是结合不同项目给后端传入的对象。
            let fetchForm = new FormData()
            fetchForm.append('chunkNumber', chunkInfo.currentChunk + 1)  // 第几片
            fetchForm.append('chunkSize', chunkSize)  // 分片大小的限制  例如限制 5M
            fetchForm.append('currentChunkSize', chunkInfo.chunk.size)  // 每一片的大小
            fetchForm.append('file', chunkInfo.chunk)   //每一片的文件
            fetchForm.append('filename', file.name)  // 文件名 
            fetchForm.append('totalChunks', chunkInfo.chunkCount) //总片数
            fetchForm.append('md5', fileMD5)
            fetchForm.append('pid', pid) //附件视频上传分类
			uni.uploadFile({
				url:HTTP_REQUEST_URL+'/api/upload/video',
				file: chunkInfo.chunk,
				formData: {
					'chunkNumber': chunkInfo.currentChunk + 1,
					'chunkSize': chunkSize,
					'currentChunkSize': chunkInfo.chunk.size,
					'filename': file.name,
					'totalChunks': chunkInfo.chunkCount,
					'md5': fileMD5,
					'pid':pid
				},
				header: {
					// #ifdef MP
					"Content-Type": "multipart/form-data",
					// #endif
					[TOKENNAME]: 'Bearer ' + store.state.app.token
				},
				success: function(res) {
					if (res.errMsg == 'uploadFile:ok') {
						success(res.data)
					    resolver(true)
					}
				},
				fail: function(res) {
					console.log("上传失败：", res)
				}
			})
        })
    }
    readFileMD5() // 开始执行代码
}