微信小程序 语音录制功能和文件(ppt、word、excel、pdf、txt格式)上传

    xiaoxiao2023-11-04  241

    语音录制

    提醒:因为开发者工具不能接收语音文件,所以要使用真机调试测试噢~

    思路:使用小程序API wx.startRecord 、wx.stopRecord 方法(调用前 记得 app.js 添加 scope.record),获取到本地录音后上传到服务器,返回该服务器文件地址。

    wxml文件: <button class="{{luStatu?'btTouch':'bt'}}" bind:touchstart="touchStart" bind:touchend="touchEnd" type='primary'> <text wx:if="{{luStatu}}">松开结束</text> <text wx:else>按住说话 </text> </button> js文件: // 触摸开始 touchStart: function() { this.setData({ luStatu: true }) var s = this; wx.startRecord({ success: function(res) { console.log(res); var tempFilePath = res.tempFilePath; s.setData({ voice: tempFilePath }); }, fail: function(res) { console.log("fail"); console.log(res); //录音失败 } }); }, // 触摸结束 touchEnd: function() { this.setData({ luStatu: false }) var s = this; console.log("end"); wx.stopRecord(); setTimeout(function() { var o = e.getUrl("util/uploader/upload", { file: "file", type: "voice" }), i = s.data.voice; wx.uploadFile({ url: o, filePath: i, name: "file", success: function(n) { s.hideLoading(); var o = JSON.parse(n.data); var url = o.files[0].url; s.setData({ url: url }) s.getedit(); }, fail: function(n) { console.log(n) } }) }, 1000) }, loading: function(t) { void 0 !== t && "" != t || (t = "加载中"), wx.showToast({ title: t, icon: "loading", duration: 5e6 }); }, hideLoading: function() { wx.hideToast(); },

    ppt、word、excel、pdf、txt格式文件上传

    思路: 使用小程序API wx.chooseMessageFile 选择本地文件(如果要想多个文件格式适用可以用判断),然后也是上传到服务器的,返回该服务器文件地址。

    备注:如果想表现各个文件的形式,可以做判断显示不同的文件格式对应的文件表现图片。

    wxml文件: <view wx:for="{{upfilelist}}" wx:key="index" wx:for-item="item"> <view class='download' data-path="{{item.path}}">{{item.name}} <view data-name="{{item.name}}" data-path="{{item.path}}" bindtap='delfile' class='radio_view'> </view> <view class="delete-btn" data-index="{{index}}" catchtap="deleteFile">删除</view> </view> </view> <view class="upload-img-btn" bindtap="chooseImg" wx:if="{{imgs.length<9}}"> <image src='../images/upload.png'></image> </view> <view class='martop60'> <text class='default_btn' bindtap='choosefilefun'>选择文件</text> </view> //选择要上传的上传文件 choosefilefun() { let that = this; if (that.data.files!==[]) { var type = "document"; } else { var type = "image"; } wx.chooseMessageFile({ count: 10, type: type, success(res) { that.loading("正在上传..."); var o = e.getUrl("util/uploader/upload", { file: "file" }), i = res.tempFiles[0].path; console.log(i) wx.uploadFile({ url: o, filePath: i, name: "file", success: function (n) { that.hideLoading(); console.log(n.data) }, fail: function (n) { console.log(n) } }); } }) },

    欢迎关注我的博客: https://blog.csdn.net/weixin_42323607

    github地址: https://github.com/Nurtuam

    多多支持!本人会持续更新哒 ❤️

    最新回复(0)