wx小程序录音并上传到后端保存[后端PHP]

wxml文件：

<view class="container"><view class="audio_ctl"><button bindtouchstart="handleRecordStart" bindtouchend="handleRecordEnd">长按录音</button><button bindtap="handlePlayVoice">播放</button><button bindtap="handleUploadVoice">上传</button><view class="uploaded"><view>已上传文件url: </view><text>{{uploaded_url}}</text></view><audio controls src="https://fanyi.baidu.com/gettts?lan=cte&text=%e4%bd%a0%e5%a5%bd%ef%bc%8c%e7%82%b9%e5%8e%bb%e4%bd%93%e8%82%b2%e9%a6%86&spd=5&source=web" /></view>
</view>

js文件：

//index.js
//获取应用实例
var app = getApp()
Page({data: {record_tmpfile: '',     // 最近一次录音的临时文件路径;record_ms: '',          // 录音的毫秒数uploaded_url: '',       // 已上传文件的路径;userInfo: {}},// 录音功能: handleRecordStart: function(e) {const that = this;const timeStart = Date.now();wx.startRecord({success: function (res) {console.log('record success res: ', res);var tempFilePath = res.tempFilePaththat.setData({record_tmpfile: tempFilePath,record_ms: Date.now() - timeStart,});},fail: function (res) {//录音失败console.log('record fail res: ', res);wx.stopRecord();if(res.errMsg.indexOf('auth') >= 0) {wx.showModal({title: '无法录音',content: '您已经拒绝访问麦克风，无法使用录音功能，如需使用，请删除此小程序，并重新搜索打开',showCancel: false,});} else {wx.showToast({title: '未知错误',})}}})setTimeout(function () {//结束录音  wx.stopRecord()}, 60000);},// 停止录音: handleRecordEnd: function(e) {wx.stopRecord()},// 播放录音: handlePlayVoice: function() {console.log('start play voice');wx.playVoice({filePath: this.data.record_tmpfile,})},// 上传录音handleUploadVoice: function() {const { record_tmpfile, record_ms } = this.data;wx.showLoading({ title: '上传中' });const that = this;wx.uploadFile({url: app.api_url + '/upload/uploadfile.php', filePath: record_tmpfile,name: 'file',formData: {audio_ms: record_ms,},success: function (res) {wx.hideLoading();var data = res.dataconsole.log('upload_res: ', res);const data2 = JSON.parse(res.data);console.log('upload res data2: ', data2);//do somethinglet toastTitle = '上传成功';if (data2.c != 0) {toastTitle = data2.m;} else {that.setData({ uploaded_url: data2.d});}setTimeout(function() {wx.showToast({ title: toastTitle });}, 500);},fail: function(res) {wx.hideLoading();}})}
})

PHP后端接收保存：

// 封装返回json数据格式方法
function json_response($c=0, $m='', $d='') {$data = array('code'     =>  $c,'msg'     =>  $m,'data'     =>  $d);return json_encode($data);
}// 接收小程序传递参数（即：小程序录音市场参数等）
$params = json_decode(file_get_contents("php://input"), true);
$audio_ms = $params['audio_ms'];// 接收小程序上传录音文件
if(!array_key_exists('file', $_FILES)) {return json_response(-1,'未传入文件',$readPath);
}// 获取临时文件路径并构造新文件名称
$file = $_FILES['file']['tmp_name'];
$randFileName = 'weapp_audio_' . md5(uniqid("", true));// 将临时文件保存到服务器中
$savePath = '/data/wwwroot/www.h5tpl.com/web/uploads/xcxvoice/' . $randFileName . '.silk';
file_put_contents($savePath, file_get_contents($file));//获取服务器中保存的录音文件路径并返回到小程序客户端中
$readPath = 'https://www.h5tpl.com/uploads/xcxvoice/' . $randFileName . '.silk';
return json_response(200,'上传成功',$readPath);

wx小程序录音并上传到后端保存[后端PHP]相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
小程序云开发上传及使用图片
推荐一个不错的学习资料库小程序云开发上传及使用图片 .wxml <view class="img-view"><view class="show&qu ...

wx小程序录音并上传到后端保存[后端PHP]

wx小程序录音并上传到后端保存[后端PHP]相关推荐

最新文章

热门文章