Bgm列表controller

package com.javaxl.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.javaxl.service.BgmService;
import com.javaxl.utils.JSONResult;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="背景音乐业务的接口", tags= {"背景音乐业务的controller"})
@RequestMapping("/bgm")
public class BgmController {
	
	@Autowired
	private BgmService bgmService;
	
	@ApiOperation(value="获取背景音乐列表", notes="获取背景音乐列表的接口")
	@PostMapping("/list")
	public JSONResult list() {
		return JSONResult.ok(bgmService.queryBgmList());
	}
	
}

chooseBgm.wxss

page {
    height: 100%;
} 

.container {
    display: flex;
    margin-top: 20rpx; 
     justify-content: space-around;   
}

.submitBtn {
    width: 80%;
    margin-top: 15px;
}

.gobackBtn {
    width: 80%;
    margin-top: 15px;
}


.loginLabel {
    color: gray;
    font-size: 15px;
}

.inputText {
    float: right;
    text-align: right;
    margin-right: 22px;
    margin-top: 11px;
    font-size: 15px;
}

.inputView {
    padding: 5px;
    background-color: white;
    line-height: 45px;
    border: solid 1px whitesmoke;
}

chooseBgm.wxml

<view>
    <form bindsubmit='upload'>

        <radio-group name="bgmId">


          <block wx:for="{{bgmList}}">
            <view class='container'>
          <audio name="{{item.name}}" author="{{item.author}}" src="{{serverUrl}}{{item.path}}" style='width:300px' id="myAudio" controls loop></audio>
          <radio style='margin-top:20px;' value='{{item.id}}'></radio>
        </view>
          </block>


        </radio-group>

        <view class="inputView">
            <label class="loginLabel">视频描述：</label>
            <input name="desc" class="inputText" placeholder="说点什么吧" />
        </view>

        <!-- 提交 -->
        <button class="submitBtn" type="primary" form-type='submit'>上传视频</button>
        
        <button class="gobackBtn" type="warn" form-type='reset'>重置</button>
    </form>
</view>

chooseBgm.js

const app = getApp()

Page({

/**
* 页面的初始数据
*/
data: {
bgmList: [],
serverUrl: "",
videoParams: {}
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (params) {

var me = this;
console.log(params);
me.setData({
videoParams: params
});

wx.showLoading({
title: '请等待...',
});
var serverUrl = app.serverUrl;
var user = app.getGlobalUserInfo();
// debugger;
// 调用后端
wx.request({
url: serverUrl + '/bgm/list',
method: "POST",
header: {
'content-type': 'application/json', // 默认值
'headerUserId': user.id,
'headerUserToken': user.userToken
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var bgmList = res.data.data;
me.setData({
bgmList: bgmList,
serverUrl: serverUrl
});
} else if (res.data.status == 502) {
wx.showToast({
title: res.data.msg,
duration: 2000,
icon: "none",
success: function () {
wx.redirectTo({
url: '../userLogin/login',
})
}
});
}
}
})
},

upload: function (e) {
var me = this;

var bgmId = e.detail.value.bgmId;
var desc = e.detail.value.desc;

console.log("bgmId:" + bgmId);
console.log("desc:" + desc);

var duration = me.data.videoParams.duration;
var tmpHeight = me.data.videoParams.tmpHeight;
var tmpWidth = me.data.videoParams.tmpWidth;
var tmpVideoUrl = me.data.videoParams.tmpVideoUrl;
var tmpCoverUrl = me.data.videoParams.tmpCoverUrl;

// 上传短视频
wx.showLoading({
title: '上传中...',
})
var serverUrl = app.serverUrl;
// fixme 修改原有的全局对象为本地缓存
var userInfo = app.getGlobalUserInfo();

wx.uploadFile({
url: serverUrl + '/video/upload',
formData: {
userId: userInfo.id, // fixme 原来的 app.userInfo.id
bgmId: bgmId,
desc: desc,
videoSeconds: duration,
videoHeight: tmpHeight,
videoWidth: tmpWidth
},
filePath: tmpVideoUrl,
name: 'file',
header: {
'content-type': 'application/json', // 默认值
'headerUserId': userInfo.id,
'headerUserToken': userInfo.userToken
},
success: function (res) {
var data = JSON.parse(res.data);
wx.hideLoading();
if (data.status == 200) {
wx.showToast({
title: '上传成功!~~',
icon: "success"
});
// 上传成功后跳回之前的页面
wx.navigateBack({
delta: 1
})

// var videoId = data.data;

// wx.showLoading({
// title: '上传中...',
// })

// wx.uploadFile({
// url: serverUrl + '/video/uploadCover',
// formData: {
// userId: app.userInfo.id,
// videoId: videoId
// },
// filePath: tmpCoverUrl,
// name: 'file',
// header: {
// 'content-type': 'application/json' // 默认值
// },
// success: function (res) {
// var data = JSON.parse(res.data);
// wx.hideLoading();
// if (data.status == 200) {
// wx.showToast({
// title: '上传成功!~~',
// icon: "success"
// });
// wx.navigateBack({
// delta: 1,
// })
// } else {
// wx.showToast({
// title: '上传失败!~~',
// icon: "success"
// });
// }

// }
// })

} else if (res.data.status == 502) {
wx.showToast({
title: res.data.msg,
duration: 2000,
icon: "none"
});
wx.redirectTo({
url: '../userLogin/login',
})
} else {
wx.showToast({
title: '上传失败!~~',
icon: "success"
});
}

}
})
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

可以看到，bgm列表出来了（目前只有一个）

短视频上传Swagger2测试成功截图

VideoController.java代码前面已经上传

将微信端代码与微信端API开放后台代码进行联调，最终成功截图如下

over.......