0017
/
gy-app-shop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(auth): 素材编辑添加上传进度条

This commit is contained in:
fhysy 2025-04-02 11:19:55 +08:00
parent c1dbf6b002
commit 3e996b0b95
1 changed files with 92 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
pages/fun/materialEdit.vue
View File

@ -44,6 +44,11 @@
</view> </view>
<u-button @click="chooseImage(item,index)" type="primary" :disabled="getDisabledStatus()" <u-button @click="chooseImage(item,index)" type="primary" :disabled="getDisabledStatus()"
:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传图片' }}</u-button> :loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传图片' }}</u-button>
<!-- 上传进度条 -->
<view v-if="item.uploadProgress > 0 && item.uploadProgress < 100" class="progress-container">
<u-line-progress :percent="item.uploadProgress" :show-percent="true" height="20"></u-line-progress>
</view>
</view> </view>
</template> </template>
@ -56,7 +61,12 @@
</view> </view>
<u-button @click="chooseAudio(item,index)" type="primary" :disabled="getDisabledStatus()" <u-button @click="chooseAudio(item,index)" type="primary" :disabled="getDisabledStatus()"
:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传音频' }}</u-button> :loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传音频' }}</u-button>
<!-- <text v-if="item.fileUrl" class="audio-name">已上传音频文件</text> -->
<!-- 上传进度条 -->
<view v-if="item.uploadProgress > 0 && item.uploadProgress < 100" class="progress-container">
<u-line-progress :percent="item.uploadProgress" :show-percent="true" height="20"></u-line-progress>
</view>
<text class="upload-tip">{{'最大' + audioSize + 'MB'}}</text> <text class="upload-tip">{{'最大' + audioSize + 'MB'}}</text>
</view> </view>
</template> </template>
@ -71,6 +81,12 @@
</view> </view>
<u-button @click="chooseVideo(item,index)" type="primary" :disabled="getDisabledStatus()" <u-button @click="chooseVideo(item,index)" type="primary" :disabled="getDisabledStatus()"
:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传视频' }}</u-button> :loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传视频' }}</u-button>
<!-- 上传进度条 -->
<view v-if="item.uploadProgress > 0 && item.uploadProgress < 100" class="progress-container">
<u-line-progress :percent="item.uploadProgress" :show-percent="true" height="20"></u-line-progress>
</view>
<text class="upload-tip">{{'最大' + videoSize + 'MB'}}</text> <text class="upload-tip">{{'最大' + videoSize + 'MB'}}</text>
</view> </view>
</template> </template>
@ -116,7 +132,7 @@
// 模板选择弹窗 // 模板选择弹窗
materialShow:false, materialShow:false,
audioSize: 10, audioSize: 10,
videoSize: 50, videoSize: 100,
audioType: ['.wav', '.mp3', '.aac', '.flac', '.ogg'], audioType: ['.wav', '.mp3', '.aac', '.flac', '.ogg'],
audioH5Type: ['wav', 'mp3', 'aac', 'flac', 'ogg'], audioH5Type: ['wav', 'mp3', 'aac', 'flac', 'ogg'],
buttonLoading:false, buttonLoading:false,
@ -165,6 +181,8 @@
item.orderItemId = this.orderItemId; item.orderItemId = this.orderItemId;
item.dictId = this.materialfrom.dictId; item.dictId = this.materialfrom.dictId;
item.id = null; item.id = null;
item.uploading = false;
item.uploadProgress = 0;
return item; return item;
}); });
}, },
@ -177,6 +195,10 @@
this.scriptContent = res.rows[0].script || ''; this.scriptContent = res.rows[0].script || '';
this.materialTemplateList = res.rows[0].materialItems || []; this.materialTemplateList = res.rows[0].materialItems || [];
res.rows[0].materialItems.forEach(async (item,index)=>{ 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 !== ''){ if(item.attrType !== 0 && item.attrValue !== ''){
let {fileUrl,fileName} = await this.getFileDetail(item.attrValue); let {fileUrl,fileName} = await this.getFileDetail(item.attrValue);
console.log("fileUrl,fileName",fileUrl,fileName) console.log("fileUrl,fileName",fileUrl,fileName)
@ -231,24 +253,31 @@
return `${shortenedName}...${extension}`; return `${shortenedName}...${extension}`;
}, },
chooseImage(item, index) { chooseImage(item, index) {
this.materialTemplateList[index].uploading = true;
uni.chooseImage({ uni.chooseImage({
count: 1, count: 1,
success: (res) => { success: (res) => {
this.$nextTick(()=>{
this.$set(this.materialTemplateList[index], 'uploading', true);
this.$set(this.materialTemplateList[index], 'uploadProgress', 0);
})
const tempFilePath = res.tempFilePaths[0]; const tempFilePath = res.tempFilePaths[0];
this.uploadFile(tempFilePath, 'image', item, index); this.uploadFile(tempFilePath, 'image', item, index);
}, },
complete: () => { fail: () => {
this.materialTemplateList[index].uploading = false; this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
} }
}); });
}, },
chooseVideo(item,index) { chooseVideo(item,index) {
this.materialTemplateList[index].uploading = true;
uni.chooseVideo({ uni.chooseVideo({
count: 1, count: 1,
maxDuration: 60, maxDuration: 60,
success: (res) => { success: (res) => {
this.$nextTick(()=>{
this.$set(this.materialTemplateList[index], 'uploading', true);
this.$set(this.materialTemplateList[index], 'uploadProgress', 0);
})
const tempFilePath = res.tempFilePath; const tempFilePath = res.tempFilePath;
const fileSize = res.size; const fileSize = res.size;
if (fileSize > this.videoSize * 1024 * 1024) { if (fileSize > this.videoSize * 1024 * 1024) {
@ -257,6 +286,7 @@
icon: 'none' icon: 'none'
}); });
this.materialTemplateList[index].uploading = false; this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
return; return;
} }
this.uploadFile(tempFilePath, 'video', item, index); this.uploadFile(tempFilePath, 'video', item, index);
@ -267,14 +297,17 @@
title: '选择视频失败', title: '选择视频失败',
icon: 'none' icon: 'none'
}); });
this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
}, },
complete: () => { complete: () => {
console.log("权限选择视频")
this.materialTemplateList[index].uploading = false; this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
} }
}); });
}, },
chooseAudio(item,index) { chooseAudio(item,index) {
this.materialTemplateList[index].uploading = true;
// 注意：H5不支持chooseFile，需要单独处理 // 注意：H5不支持chooseFile，需要单独处理
// #ifdef H5 // #ifdef H5
uni.chooseFile({ uni.chooseFile({
@ -282,6 +315,10 @@
type: 'all', type: 'all',
extension: this.audioType, extension: this.audioType,
success: (res) => { 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 tempFilePath = res.tempFiles[0].path;
const fileSize = res.tempFiles[0].size; const fileSize = res.tempFiles[0].size;
const fileName = res.tempFiles[0].name; const fileName = res.tempFiles[0].name;
@ -291,6 +328,7 @@
icon: 'none' icon: 'none'
}); });
this.materialTemplateList[index].uploading = false; this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
return; return;
} }
this.uploadFile(tempFilePath, 'audio', item, index, fileName); this.uploadFile(tempFilePath, 'audio', item, index, fileName);
@ -301,9 +339,8 @@
title: '选择音频失败', title: '选择音频失败',
icon: 'none' icon: 'none'
}); });
},
complete: () => {
this.materialTemplateList[index].uploading = false; this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
} }
}); });
// #endif // #endif
@ -314,6 +351,10 @@
type: 'file', type: 'file',
extension: this.audioH5Type, extension: this.audioH5Type,
success: (res) => { 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 tempFilePath = res.tempFiles[0].path;
const fileSize = res.tempFiles[0].size; const fileSize = res.tempFiles[0].size;
const fileName = res.tempFiles[0].name; const fileName = res.tempFiles[0].name;
@ -323,6 +364,7 @@
icon: 'none' icon: 'none'
}); });
this.materialTemplateList[index].uploading = false; this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
return; return;
} }
this.uploadFile(tempFilePath, 'audio', item, index, fileName); this.uploadFile(tempFilePath, 'audio', item, index, fileName);
@ -333,9 +375,8 @@
title: '选择音频失败', title: '选择音频失败',
icon: 'none' icon: 'none'
}); });
},
complete: () => {
this.materialTemplateList[index].uploading = false; this.materialTemplateList[index].uploading = false;
this.materialTemplateList[index].uploadProgress = 0;
} }
}); });
// #endif // #endif
@ -343,8 +384,9 @@
uploadFile(filePath, fileType, item, index, fileName = '') { uploadFile(filePath, fileType, item, index, fileName = '') {
// 这里应该是您的实际上传接口 // 这里应该是您的实际上传接口
const uploadUrl = config.baseUrl + '/resource/oss/upload'; const uploadUrl = config.baseUrl + '/resource/oss/upload';
uni.uploadFile({ // 创建上传任务
const uploadTask = uni.uploadFile({
url: uploadUrl, url: uploadUrl,
filePath: filePath, filePath: filePath,
name: 'file', name: 'file',
@ -356,7 +398,6 @@
const data = JSON.parse(uploadRes.data); const data = JSON.parse(uploadRes.data);
console.log("data", data) console.log("data", data)
// 假设服务器返回的是文件的URL // 假设服务器返回的是文件的URL
// this.materialTemplateList[index].fileUrl = data.url
this.materialTemplateList[index].attrValue = data.data.ossId; this.materialTemplateList[index].attrValue = data.data.ossId;
this.materialTemplateList[index].fileUrl = data.data.url; this.materialTemplateList[index].fileUrl = data.data.url;
this.materialTemplateList[index].fileName = data.data.fileName; this.materialTemplateList[index].fileName = data.data.fileName;
@ -371,8 +412,28 @@
title: '上传失败', title: '上传失败',
icon: 'none' 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) { deleteFile(item,index) {
uni.showModal({ uni.showModal({
@ -385,6 +446,7 @@
this.materialTemplateList[index].attrValue = ''; this.materialTemplateList[index].attrValue = '';
this.materialTemplateList[index].fileUrl = ''; this.materialTemplateList[index].fileUrl = '';
this.materialTemplateList[index].fileName = ''; this.materialTemplateList[index].fileName = '';
this.materialTemplateList[index].uploadProgress = 0;
uni.showToast({ uni.showToast({
title: '删除成功', title: '删除成功',
icon: 'success' icon: 'success'
@ -417,6 +479,17 @@
}) })
return; 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' ?'暂存':'提交' let btnTitle = status==='draft' ?'暂存':'提交'
uni.showModal({ uni.showModal({
title: '操作确认', title: '操作确认',
@ -586,9 +659,6 @@
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.audio-preview { .audio-preview {
display: flex; display: flex;
align-items: center; align-items: center;
@ -610,7 +680,10 @@
} }
} }
.progress-container {
margin: 10rpx 0;
width: 100%;
}
.upload-tip { .upload-tip {
margin-top: 5rpx; margin-top: 5rpx;
@ -637,4 +710,5 @@
align-items: center; align-items: center;
} }
} }
</style> </style>