+
+
+
{{ filename }}
@@ -52,19 +61,19 @@ export default {
props: {
parentId: {
type: String,
- required: true,
+ required: true
},
fileUrl: {
type: String,
- required: true,
+ required: true
},
- disabled:{
+ disabled: {
type: Boolean,
- default: false,
+ default: false
},
getList: {
- type: Function,
- },
+ type: Function
+ }
},
data() {
return {
@@ -75,136 +84,141 @@ export default {
uploadFailed: {}, // 存储上传失败的文件
queue: [], // 文件上传队列
maxConcurrentUploads: 5, // 最大并发上传数
- uploadsNum:{},
- };
+ uploadsNum: {}
+ }
},
beforeMount() {
- this.resetComponent();
+ this.resetComponent()
},
mounted() {
- this.resetComponent(); // 在组件挂载完成后调用
+ this.resetComponent() // 在组件挂载完成后调用
},
methods: {
handleClose(done) {
this.$modal
.confirm('您确认要关闭吗？关闭后，未完成上传的文件将停止上传。')
.then(() => {
- this.queue = []; // 清空队列
- done();
+ this.queue = [] // 清空队列
+ done()
})
.then(() => {
- this.resetComponent();
- this.getList && this.getList(); // 重新加载文件列表
+ this.resetComponent()
+ this.getList && this.getList() // 重新加载文件列表
+ })
+ .catch(() => {
})
- .catch(() => {});
},
// 重置组件状态
resetComponent() {
- this.fileList = [];
- this.uploadProgress = {};
- this.uploadFailed = {};
- this.queue = [];
- this.uploadsNum = {};
+ this.fileList = []
+ this.uploadProgress = {}
+ this.uploadFailed = {}
+ this.queue = []
+ this.uploadsNum = {}
},
// 自定义上传请求
customUpload(uploadFile) {
- this.drawer = true;
- const file = uploadFile.file;
- this.$set(this.uploadProgress, file.name, 0); // 更新文件上传进度
+ this.drawer = true
+ const file = uploadFile.file
+ this.$set(this.uploadProgress, file.name, 0) // 更新文件上传进度
// 将文件添加到队列
- this.queue.push(file);
- this.startNextUpload();
+ this.queue.push(file)
+ this.startNextUpload()
},
// 处理文件夹上传
handleChange(file, fileList) {
// 监听文件夹上传，遍历文件夹中的文件
if (file && file.webkitRelativePath) {
- const folderPath = file.webkitRelativePath.split('/')[0]; // 文件夹路径
- const filesInFolder = fileList.filter(f => f.webkitRelativePath.startsWith(folderPath));
+ const folderPath = file.webkitRelativePath.split('/')[0] // 文件夹路径
+ const filesInFolder = fileList.filter(f => f.webkitRelativePath.startsWith(folderPath))
}
},
// 分片上传
uploadChunks(file) {
- if (!this.drawer) return; // 检查是否需要继续上传
- this.$set(this.uploadsNum, file.name, 0);
- const totalChunks = Math.ceil(file.size / this.chunkSize);
- let currentChunk = 0;
+ if (!this.drawer) return // 检查是否需要继续上传
+ this.$set(this.uploadsNum, file.name, 0)
+ const totalChunks = Math.ceil(file.size / this.chunkSize)
+ let currentChunk = 0
const uploadNextChunk = () => {
- if (!this.drawer) return; // 检查是否需要继续上传
- const start = currentChunk * this.chunkSize;
- const end = Math.min(file.size, start + this.chunkSize);
- const chunk = file.slice(start, end);
- const formData = new FormData();
- formData.append('file', chunk);
- formData.append('filename', file.name);
- formData.append('chunk', currentChunk + 1);
- formData.append('totalChunks', totalChunks);
- formData.append('parentId', this.parentId);
- formData.append('fileUrl', this.fileUrl);
+ if (!this.drawer) return // 检查是否需要继续上传
+ const start = currentChunk * this.chunkSize
+ const end = Math.min(file.size, start + this.chunkSize)
+ const chunk = file.slice(start, end)
+ const formData = new FormData()
+ formData.append('file', chunk)
+ formData.append('filename', file.name)
+ formData.append('chunk', currentChunk + 1)
+ formData.append('totalChunks', totalChunks)
+ formData.append('parentId', this.parentId)
+ formData.append('fileUrl', this.fileUrl)
uploadFiles(formData)
.then(() => {
- currentChunk++;
- const progress = Math.floor((currentChunk / totalChunks) * 100);
- this.$set(this.uploadsNum, file.name, progress);
- this.$set(this.uploadProgress, file.name, progress);
+ currentChunk++
+ const progress = Math.floor((currentChunk / totalChunks) * 100)
+ this.$set(this.uploadsNum, file.name, progress)
+ this.$set(this.uploadProgress, file.name, progress)
if (currentChunk < totalChunks) {
- uploadNextChunk();
+ uploadNextChunk()
} else {
- this.startNextUpload();
- this.checkAllUploadsComplete();
+ this.startNextUpload()
+ this.checkAllUploadsComplete()
}
})
.catch(() => {
- this.$set(this.uploadFailed, file.name, true);
- this.startNextUpload();
- });
- };
+ this.$set(this.uploadFailed, file.name, true)
+ this.startNextUpload()
+ })
+ }
- uploadNextChunk();
+ uploadNextChunk()
},
checkAllUploadsComplete() {
- const allComplete = Object.values(this.uploadProgress).every(progress => progress === 100);
+ const allComplete = Object.values(this.uploadProgress).every(progress => progress === 100)
if (allComplete) {
- this.$message.success("所有文件上传完成！");
- this.drawer = false; // 自动关闭弹窗
- this.getList && this.getList(); // 重新加载列表
- this.resetComponent();
+ this.$message.success('所有文件上传完成！')
+ this.drawer = false // 自动关闭弹窗
+ this.getList && this.getList() // 重新加载列表
+ this.resetComponent()
}
},
// 启动队列中的下一个文件上传（控制并发）
startNextUpload() {
- if (!this.drawer) return; // 如果停止上传，则不启动新任务
+ if (!this.drawer) return // 如果停止上传，则不启动新任务
Object.keys(this.uploadsNum).forEach((fileName) => {
if (this.uploadsNum[fileName] === 100) {
- delete this.uploadsNum[fileName];
+ delete this.uploadsNum[fileName]
}
- });
+ })
if (this.queue.length === 0 || Object.values(this.uploadsNum).length >= this.maxConcurrentUploads) {
- return;
+ return
}
- const nextFile = this.queue.shift();
- this.uploadChunks(nextFile);
+ const nextFile = this.queue.shift()
+ this.uploadChunks(nextFile)
},
beforeUpload(file) {
- const maxSize = 2 * 1024 * 1024*1024; // 限制文件最大为 5MB
+ const maxSize = 2 * 1024 * 1024 * 1024 // 限制文件最大为 5MB
if (file.size > maxSize) {
- this.$message.error('文件大小不能超过 2GB');
- return false; // 阻止上传
+ this.$message.error('文件大小不能超过 2GB')
+ return false // 阻止上传
}
-
- return true; // 允许上传
+ console.log(file)
+ if (file.size <= 0) {
+ this.$message.error('文件大小不正确')
+ return false // 阻止上传
+ }
+ return true // 允许上传
},
// 处理超出文件数限制的情况
handleExceed(files, fileList) {
- this.$message.warning(`最多只能选择50个文件，当前选择了 ${files.length + fileList.length} 个文件`);
+ this.$message.warning(`最多只能选择50个文件，当前选择了 ${files.length + fileList.length} 个文件`)
}
}
-};
+}