上传短视频业务流程与实现

1. 上传短视频业务流程图

一个包含上传短视频的业务流程图，展示了从用户选择视频到背景音乐选择以及最终上传短视频的完整过程。

2. 用户选择视频

在小程序端，可以通过调用 wx.chooseVideo 接口实现视频的选择。该接口支持从手机相册中选择视频或拍摄新的视频。

uploadVideo: function() {    const me = this;    wx.chooseVideo({        sourceType: ['album'],        success(res) {            const duration = res.duration;            const tmpheight = res.height;            const tmpwidth = res.width;            const tmpVideoUrl = res.tempFilePath;            const tmpCoverUrl = res.thumbTempFilePath;            if (duration > 11) {                wx.showToast({                    title: '视频长度不能超过10秒...',                    icon: 'none',                    duration: 2500                });            } else if (duration < 1) {                wx.showToast({                    title: '视频长度不能小于1秒...',                    icon: 'none',                    duration: 2500                });            } else {                // 打开选择BGM的页面                wx.navigateTo({                    url: '../chooseBgm/chooseBgm?duration=' + duration + '&tmpheight=' + tmpheight + '&tmpwidth=' + tmpwidth + '&tmpVideoUrl=' + tmpVideoUrl + '&tmpCoverUrl=' + tmpCoverUrl                });            }        }    });}

3. 选择背景音乐页面讲解

1. 新增背景音乐选择页面

在 chooseBgm.wxml 中添加音频组件，并在 chooseBgm.js 中配置音频数据。需要注意的是，直接使用微信官方音频组件可能会遇到权限问题，建议将音乐下载到本地后再传输至云开发环境。

2. 页面开发与联调

在 chooseBgm.js 中添加页面联调代码，通过 wx.request 调用后端接口获取背景音乐列表，并在前端完成数据绑定和播放功能。

const app = getApp();Page({    data: {        bgmList: [],        serverUrl: ""    },    onLoad: function() {        const me = this;        wx.showLoading({            title: '请等待...'        });        const serverUrl = app.serverUrl;        wx.request({            url: serverUrl + '/bgm/list',            method: 'POST',            header: {                'content-type': 'application/json'            },            success(res) {                console.log(res.data);                wx.hideLoading();                if (res.data.status === 200) {                    const bgmList = res.data.data;                    me.setData({                        bgmList: bgmList,                        serverUrl: serverUrl                    });                }            }        });    }});

4. 后台BGM列表接口开发

1. 接口开发

接口定义：在 BgmService.java 中定义 queryBgmList 方法，返回背景音乐列表。

实现类：在 BgmServiceImpl.java 中实现 queryBgmList 方法，调用数据库查询所有 BGM 资源。

控制器：在 BgmController.java 中开发 /list 接口，调用服务层方法获取数据并返回。

2. 测试与验证

确保后端接口能够正常返回数据，并在前端页面正确展示 BGM 列表和播放功能。

5. 开发上传短视频接口并完善 Swagger 测试

1. 接口开发

在 VideoController.java 中开发 /upload 接口，支持视频上传和参数传递。接口支持以下参数：

userId：用户 ID，必填

bgmId：背景音乐 ID，可选

videoSeconds：视频播放长度，必填

videoWidth：视频宽度，必填

videoHeight：视频高度，必填

desc：视频描述，可选

2. Swagger 测试

通过 Swagger 2.0 测试接口，确保接口参数与请求格式符合规范，并提供清晰的 API 文档。

6. 视频临时参数传入下一个页面

在 mine.js 中实现页面跳转，传递视频相关参数（如时间、尺寸等），并在 chooseBgm.js 中接收并处理这些参数。

upload: function(e) {    const me = this;    const bgmId = e.detail.value.bgmId;    const desc = e.detail.value.desc;    console.log("bgmId:", bgmId);    console.log("desc:", desc);        wx.showLoading({        title: '上传中...'    });        const serverUrl = app.serverUrl;    wx.uploadFile({        url: serverUrl + '/video/upload',        formData: {            userId: app.userInfo.id,            bgmId: bgmId,            desc: desc,            videoSeconds: duration,            videoHeight: tmpheight,            videoWidth: tmpwidth        },        filePath: tmpVideoUrl,        name: 'file',        header: {            'content-type': 'application/json'        },        success(res) {            wx.hideLoading();            if (res.status === 200) {                wx.showToast({                    title: '上传成功!',                    icon: 'success'                });            }        }    });}

7. 小程序端上传短视频联调

在 chooseBgm.js 中实现视频上传功能，通过 wx.uploadFile 调用后端接口，完成短视频的上传与存储。

转载地址：http://rnrp.baihongyu.com/

你可能感兴趣的文章