提醒:因为开发者工具不能接收语音文件,所以要使用真机调试测试噢~
思路:使用小程序API wx.startRecord 、wx.stopRecord 方法(调用前 记得 app.js 添加 scope.record),获取到本地录音后上传到服务器,返回该服务器文件地址。
<button class="{{luStatu?'btTouch':'bt'}}" bind:touchstart="touchStart" bind:touchend="touchEnd" type='primary'>
<text wx:if="{{luStatu}}">松开结束text>
<text wx:else>按住说话 text>
button>
// 触摸开始
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();
},
思路: 使用小程序API wx.chooseMessageFile 选择本地文件(如果要想多个文件格式适用可以用判断),然后也是上传到服务器的,返回该服务器文件地址。
备注:如果想表现各个文件的形式,可以做判断显示不同的文件格式对应的文件表现图片。
<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/qdheyongjie
多多支持!本人会持续更新哒 ❤️