import { defineStore } from 'pinia' import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload' import { ServeSendTalkFile } from '@/api/chat' import { useDialogueListStore } from '@/store/modules/dialogueList' // @ts-ignore const message = window.$message const {updateUploadProgress} = useDialogueListStore() // 处理拆分上传文件 function fileSlice(file: File, uploadId: string, eachSize: number) { const splitNum = Math.ceil(file.size / eachSize) // 分片总数 const items: FormData[] = [] // 处理每个分片的上传操作 for (let i = 0; i < splitNum; i++) { const start = i * eachSize const end = Math.min(file.size, start + eachSize) const form = new FormData() form.append('file', file.slice(start, end)) form.append('upload_id', uploadId) form.append('split_index', `${i + 1}`) form.append('split_num', `${splitNum}`) items.push(form) } return items } export const useUploadsStore = defineStore('uploads', { state: () => { return { isShow: false, items: [], isUploading: false,//当前是否正在上传 uploadingNum: 0//当前正在上传数量 } }, getters: { successCount: (state) => { return state.items.filter((item: any) => { return item.status === 2 }).length } }, actions: { close() { this.isShow = false }, // 初始化上传 initUploadFile(file: File, talkParams: any, msgId: string) { const {type:talkType,receiver_id:receiverId,username} = talkParams; ServeFindFileSplitInfo({ file_name: file.name, file_size: file.size }).then((res) => { if (res.code == 200) { const { upload_id, split_size } = res.data // @ts-ignore this.items.unshift({ file: file, talk_type: talkType, receiver_id: receiverId, upload_id: upload_id, uploadIndex: 0, percentage: 0, status: 0, // 文件上传状态 0:等待上传 1:上传中 2:上传完成 3:网络异常 files: fileSlice(file, upload_id, split_size), avatar: '', username: username }) this.triggerUpload(upload_id,msgId) this.isShow = true } else { this.updateUploadStatus(false) } }).catch(()=> { this.updateUploadStatus(false) }) }, // 获取分片文件数组索引 findItem(uploadId: string): any { return this.items.find((item: any) => item.upload_id === uploadId) }, // 触发上传 triggerUpload(uploadId: string,msgId: string) { const item = this.findItem(uploadId) const form = item.files[item.uploadIndex] item.status = 1 // 开始上传时就更新进度 const currentPercentage = (item.uploadIndex / item.files.length) * 100 item.percentage = currentPercentage.toFixed(1) updateUploadProgress(msgId, currentPercentage) ServeFileSubareaUpload(form, (progressEvent) => { // 计算当前分片的进度 const currentChunkProgress = (progressEvent.loaded / progressEvent.total) * 100 // 计算总体进度:已完成分片 + 当前分片的进度 const totalProgress = ((item.uploadIndex + currentChunkProgress / 100) / item.files.length) * 100 item.percentage = totalProgress.toFixed(1) updateUploadProgress(msgId, totalProgress) }) .then((res) => { if (res.code == 200) { item.uploadIndex++ if (item.uploadIndex === item.files.length) { item.status = 2 item.percentage = 100 console.log(msgId,'msgId'); updateUploadProgress(msgId,100) this.sendUploadMessage(item, msgId) // 更新虚拟列表中的状态 const { virtualList } = useDialogueListStore() const index = virtualList.value.findIndex(item => item.file_num === msgId) if (index !== -1) { virtualList.value[index].uploadStatus = 2 virtualList.value[index].uploadCurrent = 100 } } else { // 继续上传下一个分片 this.triggerUpload(uploadId, msgId) } } else { this.updateUploadStatus(false) item.status = 3 // 更新虚拟列表中的状态为失败 const { virtualList } = useDialogueListStore() const index = virtualList.value.findIndex(item => item.file_num === msgId) if (index !== -1) { virtualList.value[index].uploadStatus = 3 } } }) .catch(() => { this.updateUploadStatus(false) item.status = 3 // 更新虚拟列表中的状态为失败 const { virtualList } = useDialogueListStore() const index = virtualList.value.findIndex(item => item.file_num === msgId) if (index !== -1) { virtualList.value[index].uploadStatus = 3 } }) }, // 发送上传消息 sendUploadMessage(item: any, file_num: String) { ServeSendTalkFile({ upload_id: item.upload_id, receiver_id: item.receiver_id, talk_type: item.talk_type, file_num: file_num }).then((res) => { console.log(res, 'res') if(res.code == 200){ this.updateUploadStatus(false) }else{ this.updateUploadStatus(false) } }).catch(() => { this.updateUploadStatus(false) }) }, //更新资源上传状态 updateUploadStatus(isUploading: boolean){ if(isUploading){ this.uploadingNum++ this.isUploading = true }else{ this.uploadingNum-- if(this.uploadingNum < 0){ this.uploadingNum = 0 } if(this.uploadingNum === 0){ this.isUploading = false } } }, // 清除上传 clearUpload(){ this.isUploading = false this.uploadingNum = 0 } } })