前言
书接上回的《SpringBoot开发案例之微信小程序文件上传》，正常的业务流程是，口语测评需要学生通过前端微信小程序录入一段音频，通过调用第三方音频处理服务商进行评分，然后服务端对原始录音、标准录音以及评分信息进行存储，最终呈现给学生并用于复看以及复读。
微信端
index.wxml:
<button bindtap="start" class='btn'>开始录音</button>
<button bindtap="pause" class='btn'>暂停录音</button>
<button bindtap="stop" class='btn'>停止录音</button>
<button bindtap="play" class='btn'>播放录音</button>
<button bindtap="upload" class='btn'>上传录音</button>
index.wxss:
.btn{
margin-top: 10rpx;
}
index.js:
//录音管理
const recorderManager = wx.getRecorderManager()
//音频组件控制
const innerAudioContext = wx.createInnerAudioContext()
var tempFilePath;
Page({
data: {
},
//开始录音的时候
start: function () {
const options = {
duration: 10000,//指定录音的时长，单位 ms
sampleRate: 16000,//采样率
numberOfChannels: 1,//录音通道数
encodeBitRate: 96000,//编码码率
format: 'mp3',//音频格式，有效值 aac/mp3
frameSize: 50,//指定帧大小，单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start')
});
//错误回调
recorderManager.onError((res) => {
console.log(res);
})
},
//暂停录音
pause: function () {
recorderManager.onPause();
console.log('暂停录音')
},
//停止录音
stop: function () {
recorderManager.stop();
recorderManager.onStop((res) => {
this.tempFilePath = res.tempFilePath;
console.log('停止录音', res.tempFilePath)
const { tempFilePath } = res
})
},
//播放声音
play: function () {
innerAudioContext.autoplay = true
innerAudioContext.src = this.tempFilePath,
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
},
//上传录音
upload:function(){
wx.uploadFile({
url: "https://xxx.com/fileUpload",//演示域名、自行配置
filePath: this.tempFilePath,
name: 'file',
header: {
"Content-Type": "multipart/form-data"
},
formData:
{
userId: 12345678 //附加信息为用户ID
},
success: function (res) {
console.log(res);
wx.showToast({
title: '上传成功',
icon: 'success',
duration: 2000
})
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
}
})
},
onLoad: function () {
},
})
上传服务
/**
* 口语测试
* 创建者 柒
* 创建时间 2018年3月13日
*/
@Api(tags ="口语测试接口")
@RestController
@RequestMapping("/test")
public class TestController {
private final static Logger LOGGER = LoggerFactory.getLogger(WechatController.class);
@Value("${web.upload.path}")
private String uploadPath;
@ApiOperation(value="上传文件(小程序)")
@PostMapping("/fileUpload")
public String upload(HttpServletRequest request, @RequestParam("file")MultipartFile[] files){
LOGGER.info("上传测试");
//多文件上传
if(files!=null && files.length>=1) {
BufferedOutputStream bw = null;
try {
String fileName = files[0].getOriginalFilename();
//判断是否有文件(实际生产中要判断是否是音频文件)
if(StringUtils.isNoneBlank(fileName)) {
//创建输出文件对象
File outFile = new File(uploadPath + UUID.randomUUID().toString()+ FileUtil.getFileType(fileName));
//拷贝文件到输出文件对象
FileUtils.copyInputStreamToFile(files[0].getInputStream(), outFile);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if(bw!=null) {bw.close();}
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "success";
}
}
Java 面试宝典是大明哥全力打造的 Java 精品面试题，它是一份靠谱、强大、详细、经典的 Java 后端面试宝典。它不仅仅只是一道道面试题，而是一套完整的 Java 知识体系，一套你 Java 知识点的扫盲贴。
它的内容包括：
- 大厂真题：Java 面试宝典里面的题目都是最近几年的高频的大厂面试真题。
- 原创内容：Java 面试宝典内容全部都是大明哥原创，内容全面且通俗易懂，回答部分可以直接作为面试回答内容。
- 持续更新：一次购买，永久有效。大明哥会持续更新 3+ 年，累计更新 1000+，宝典会不断迭代更新，保证最新、最全面。
- 覆盖全面：本宝典累计更新 1000+，从 Java 入门到 Java 架构的高频面试题，实现 360° 全覆盖。
- 不止面试：内容包含面试题解析、内容详解、知识扩展，它不仅仅只是一份面试题，更是一套完整的 Java 知识体系。
- 宝典详情：https://www.yuque.com/chenssy/sike-java/xvlo920axlp7sf4k
- 宝典总览：https://www.yuque.com/chenssy/sike-java/yogsehzntzgp4ly1
- 宝典进展：https://www.yuque.com/chenssy/sike-java/en9ned7loo47z5aw
目前 Java 面试宝典累计更新 400+ 道，总字数 42w+。大明哥还在持续更新中，下图是大明哥在 2024-12 月份的更新情况：
想了解详情的小伙伴，扫描下面二维码加大明哥微信【daming091】咨询
同时，大明哥也整理一套目前市面最常见的热点面试题。微信搜[大明哥聊 Java]或扫描下方二维码关注大明哥的原创公众号[大明哥聊 Java] ，回复【面试题】 即可免费领取。
