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);
                  }
            },

 

posted @ 2024-05-15 21:43  伐木工熊大  阅读(1)  评论(0编辑  收藏  举报