feat(auth): 素材编辑添加上传进度条
This commit is contained in:
fhysy
parent
c1dbf6b002
commit
3e996b0b95
|
|
@ -44,6 +44,11 @@
|
|||
</view>
|
||||
<u-button @click="chooseImage(item,index)" type="primary" :disabled="getDisabledStatus()"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,7 +61,12 @@
|
|||
</view>
|
||||
<u-button @click="chooseAudio(item,index)" type="primary" :disabled="getDisabledStatus()"
|
||||
: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>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -71,6 +81,12 @@
|
|||
</view>
|
||||
<u-button @click="chooseVideo(item,index)" type="primary" :disabled="getDisabledStatus()"
|
||||
: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>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue