2024/05/15(团队开发)
我今天主要要完成的内容就是将我之前上传视频的逻辑进行修改。
之前在上传视频和封面时,是选择完成视频和图片后直接将其上传给后端服务器,然后前端获得后端上传到阿里云后返回的url赋值给对应的属性值,在最后点击上传后会将这些信息携带到后端服务器来存储到数据库。这就会造成,当用户选择的视频出现错误后,重新选择视频就又会进行一次视频上传到后端。这样就会造成多次选择封面和选择视频会造成流量的浪费,毕竟阿里云的oss存储服务是要钱的。
所以,我要将这些上传视频的逻辑修改,在点击上传后,逐步上传视频,封面,和基本信息。在前者上传成功后才进行下一步上传,这样就可以减少资源的浪费。
然后之前的三个方法中,对两个进行的删减,加入了另一个方法中。
selectCover:function(){ var self=this; uni.chooseImage({ count:1, sizeType: ['original', 'compressed'], success:function(res){ self.imagesrc=res.tempFilePaths[0]; } }); }, selectVideo: function() { var self = this; uni.chooseVideo({ sourceType: ['album'], success: function(res) { self.videosrc = res.tempFilePath; }, }); }, uploadmes: function() { const userInfo = uni.getStorageSync('userInfo'); if(userInfo===null) { uni.navigateTo({ url:"/pages/userinformation/login/login" }) return; } this.information.userid=userInfo.id; if (this.videosrc === '' || this.imagesrc === '' || this.information.description === '') { uni.showToast({ title: "视频、封面和描述不能为空", icon: 'error' }); return; } var self = this; const valuesArray = this.labels.map(label => label.value); this.information.label = valuesArray.filter(item => item !== '#' && item.includes('#')).join(''); if(this.information.label.length>=100) { uni.showToast({ title:'标签总字数不能大于100', icon: 'error', }) } uni.showLoading({ title: '视频上传中' }); uni.uploadFile({ //上传视频 url: self.$BASE_URL.BASE_URL+'/upload', name: 'file', filePath: self.videosrc, success: function(uploadRes) { console.log(uploadRes.data); self.information.videoUrl = uploadRes.data; console.log(self.information.videoUrl); uni.showLoading({ title: '封面上传中' }); // 在视频上传成功后再上传封面 uni.uploadFile({ //上传封面 url: self.$BASE_URL.BASE_URL+'/upload', name: 'file', filePath: self.imagesrc, success: function(uploadRes) { console.log(uploadRes); self.information.coverUrl = uploadRes.data; console.log(self.information.coverUrl); uni.showLoading({ title: '信息上传中' }); // 在封面上传成功后上传信息 uni.request({ method: "POST", url: self.$BASE_URL.BASE_URL+'/mesupload', data: self.information, success: (res) => { console.log(res.data); uni.hideLoading(); uni.showToast({ title: "视频上传成功", }); uni.switchTab({ url: "/pages/index/index" }); }, fail() { uni.hideLoading(); uni.showToast({ title: "信息上传失败", icon: 'error', }); } }); }, fail: function() { uni.hideLoading(); uni.showToast({ title: "封面上传失败", icon: 'error', }); } }); }, fail: function() { uni.hideLoading(); uni.showToast({ title: "视频上传失败", icon: 'error', }); } }); }
然后再对视频的描述信息加入一些限制,避免造成存入数据库时出现错误。
limitDescription(event) { const maxLength = 200; if (event.target.value.length >= maxLength) { // 截取超过长度的部分 this.information.description = event.target.value.slice(0, maxLength); } },