diff --git a/pages/fun/materialEdit.vue b/pages/fun/materialEdit.vue
index 4091f50..33bc999 100644
--- a/pages/fun/materialEdit.vue
+++ b/pages/fun/materialEdit.vue
@@ -44,6 +44,11 @@
{{ item.attrValue ? '重新上传' : '上传图片' }}
+
+
+
+
+
@@ -56,7 +61,12 @@
{{ item.attrValue ? '重新上传' : '上传音频' }}
-
+
+
+
+
+
+
{{'最大' + audioSize + 'MB'}}
@@ -71,6 +81,12 @@
{{ item.attrValue ? '重新上传' : '上传视频' }}
+
+
+
+
+
+
{{'最大' + videoSize + 'MB'}}
@@ -116,7 +132,7 @@
// 模板选择弹窗
materialShow:false,
audioSize: 10,
- videoSize: 50,
+ videoSize: 100,
audioType: ['.wav', '.mp3', '.aac', '.flac', '.ogg'],
audioH5Type: ['wav', 'mp3', 'aac', 'flac', 'ogg'],
buttonLoading:false,
@@ -165,6 +181,8 @@
item.orderItemId = this.orderItemId;
item.dictId = this.materialfrom.dictId;
item.id = null;
+ item.uploading = false;
+ item.uploadProgress = 0;
return item;
});
},
@@ -177,6 +195,10 @@
this.scriptContent = res.rows[0].script || '';
this.materialTemplateList = res.rows[0].materialItems || [];
res.rows[0].materialItems.forEach(async (item,index)=>{
+ // 初始化上传状态和进度
+ this.$set(this.materialTemplateList[index], 'uploading', false);
+ this.$set(this.materialTemplateList[index], 'uploadProgress', 0);
+
if(item.attrType !== 0 && item.attrValue !== ''){
let {fileUrl,fileName} = await this.getFileDetail(item.attrValue);
console.log("fileUrl,fileName",fileUrl,fileName)
@@ -231,24 +253,31 @@
return `${shortenedName}...${extension}`;
},
chooseImage(item, index) {
- this.materialTemplateList[index].uploading = true;
uni.chooseImage({
count: 1,
success: (res) => {
+ this.$nextTick(()=>{
+ this.$set(this.materialTemplateList[index], 'uploading', true);
+ this.$set(this.materialTemplateList[index], 'uploadProgress', 0);
+ })
const tempFilePath = res.tempFilePaths[0];
this.uploadFile(tempFilePath, 'image', item, index);
},
- complete: () => {
+ fail: () => {
this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
}
});
},
chooseVideo(item,index) {
- this.materialTemplateList[index].uploading = true;
uni.chooseVideo({
count: 1,
maxDuration: 60,
success: (res) => {
+ this.$nextTick(()=>{
+ this.$set(this.materialTemplateList[index], 'uploading', true);
+ this.$set(this.materialTemplateList[index], 'uploadProgress', 0);
+ })
const tempFilePath = res.tempFilePath;
const fileSize = res.size;
if (fileSize > this.videoSize * 1024 * 1024) {
@@ -257,6 +286,7 @@
icon: 'none'
});
this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
return;
}
this.uploadFile(tempFilePath, 'video', item, index);
@@ -267,14 +297,17 @@
title: '选择视频失败',
icon: 'none'
});
+ this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
},
complete: () => {
+ console.log("权限选择视频")
this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
}
});
},
chooseAudio(item,index) {
- this.materialTemplateList[index].uploading = true;
// 注意：H5不支持chooseFile，需要单独处理
// #ifdef H5
uni.chooseFile({
@@ -282,6 +315,10 @@
type: 'all',
extension: this.audioType,
success: (res) => {
+ this.$nextTick(()=>{
+ this.$set(this.materialTemplateList[index], 'uploading', true);
+ this.$set(this.materialTemplateList[index], 'uploadProgress', 0);
+ })
const tempFilePath = res.tempFiles[0].path;
const fileSize = res.tempFiles[0].size;
const fileName = res.tempFiles[0].name;
@@ -291,6 +328,7 @@
icon: 'none'
});
this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
return;
}
this.uploadFile(tempFilePath, 'audio', item, index, fileName);
@@ -301,9 +339,8 @@
title: '选择音频失败',
icon: 'none'
});
- },
- complete: () => {
this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
}
});
// #endif
@@ -314,6 +351,10 @@
type: 'file',
extension: this.audioH5Type,
success: (res) => {
+ this.$nextTick(()=>{
+ this.$set(this.materialTemplateList[index], 'uploading', true);
+ this.$set(this.materialTemplateList[index], 'uploadProgress', 0);
+ })
const tempFilePath = res.tempFiles[0].path;
const fileSize = res.tempFiles[0].size;
const fileName = res.tempFiles[0].name;
@@ -323,6 +364,7 @@
icon: 'none'
});
this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
return;
}
this.uploadFile(tempFilePath, 'audio', item, index, fileName);
@@ -333,9 +375,8 @@
title: '选择音频失败',
icon: 'none'
});
- },
- complete: () => {
this.materialTemplateList[index].uploading = false;
+ this.materialTemplateList[index].uploadProgress = 0;
}
});
// #endif
@@ -343,8 +384,9 @@
uploadFile(filePath, fileType, item, index, fileName = '') {
// 这里应该是您的实际上传接口
const uploadUrl = config.baseUrl + '/resource/oss/upload';
-
- uni.uploadFile({
+
+ // 创建上传任务
+ const uploadTask = uni.uploadFile({
url: uploadUrl,
filePath: filePath,
name: 'file',
@@ -356,7 +398,6 @@
const data = JSON.parse(uploadRes.data);
console.log("data", data)
// 假设服务器返回的是文件的URL
- // this.materialTemplateList[index].fileUrl = data.url
this.materialTemplateList[index].attrValue = data.data.ossId;
this.materialTemplateList[index].fileUrl = data.data.url;
this.materialTemplateList[index].fileName = data.data.fileName;
@@ -371,8 +412,28 @@
title: '上传失败',
icon: 'none'
});
+ },
+ complete: () => {
+ console.log('上传结束');
+ this.materialTemplateList[index].uploading = false;
+ // 完成后将进度设为100，然后延迟一会儿再设为0以显示完成效果
+ this.materialTemplateList[index].uploadProgress = 100;
+ setTimeout(() => {
+ this.materialTemplateList[index].uploadProgress = 0;
+ }, 500);
}
});
+
+ // 监听上传进度
+ uploadTask.onProgressUpdate((res) => {
+ console.log('上传进度', res.progress - 15);
+ console.log('已经上传的数据长度', res.totalBytesSent);
+ console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
+ let progress = (res.progress - 15 > 0)?(res.progress - 15) : res.progress;
+
+ this.materialTemplateList[index].uploadProgress = progress;
+
+ });
},
deleteFile(item,index) {
uni.showModal({
@@ -385,6 +446,7 @@
this.materialTemplateList[index].attrValue = '';
this.materialTemplateList[index].fileUrl = '';
this.materialTemplateList[index].fileName = '';
+ this.materialTemplateList[index].uploadProgress = 0;
uni.showToast({
title: '删除成功',
icon: 'success'
@@ -417,6 +479,17 @@
})
return;
}
+
+ // 检查是否有正在上传的文件
+ const isUploading = this.materialTemplateList.some(item => item.uploading || (item.uploadProgress > 0 && item.uploadProgress < 100));
+ if (isUploading) {
+ this.$refs.uToast.show({
+ title: '请等待文件上传完成',
+ type: 'warning',
+ })
+ return;
+ }
+
let btnTitle = status==='draft' ?'暂存':'提交'
uni.showModal({
title: '操作确认',
@@ -586,9 +659,6 @@
margin-bottom: 10rpx;
}
-
-
-
.audio-preview {
display: flex;
align-items: center;
@@ -610,7 +680,10 @@
}
}
-
+ .progress-container {
+ margin: 10rpx 0;
+ width: 100%;
+ }
.upload-tip {
margin-top: 5rpx;
@@ -637,4 +710,5 @@
align-items: center;
}
}
-
\ No newline at end of file
+
+