小程序的图片以及语音上传

微信小程序作为一种比较新的前端技术，继续保持了数据驱动的特点，小程序依附微信这个框架平台，提供了很多比较实用的开放接口，录音和上传照片就在其中，wxml代码如下：

<view class='importObj'>
   <image src='../../images/home/icon-pic.png' bindtap='choosePic'></image>
   <image src='../../images/home/icon-sound.png' bindtouchstart="touchdown" bindtouchend="touchup"></image>
</view> 

 对应的js如下：

choosePic:function(){
    if(this.data.getImg.length>=6){
      Util.tip('最多选择六张图片')
      return
    }
    var that = this;
    var imgcount = 6 - this.data.getImg.length
    wx.chooseImage({
      count: imgcount,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length>0){
          wx.showLoading({
            title: '上传中',
            mask: true
          })
          var promises = [];
          for(var i =0 ;i<tempFilePaths.length;i++){
            promises.push(that.uploadImg(that, tempFilePaths[i]))
          }
          Promise.all(promises).then(function(){
            wx.hideLoading()
          })
        }
      }
    })
  },
  uploadImg:function(that,path){
    return new Promise(function (resolve, reject) {
      Yyc.uploadFile({
        url: ctx + '/api/mini/homeschool/sendMessageAttachment',
        filePath: path,
        name: 'fileupload',
        formData: {
          'type': 1
        },
        success(res) {
          if (res.data.ret == 0) {
            const data = res.data
            var lists = that.data.getImg;
            var newData = { img: data.path };
            lists.push(newData);
            that.setData(that.data);
            resolve()
          } else {
            Util.tip('上传失败')
            reject();
          }
        }
      })
    })
  }

 上传照片和H5的方式一样，调取原生的js方法，在微信小程序里，提供了更简洁的使用参数，比如控制单次上传数目，以及比对选取文件类型，语音录入和上传，我们使用一张上传中的gif图，在模拟长按事件中展示，语音以及图片不需要接口，也可以实现点击播放和展示之类的，上传代码为真实项目，仅供参考，语音成功录入以后，会返回时长之类的参数，供展示来用，代码如下：

confirmSend:function(){
var that = this
if (that.data.voiceShow){
wx.showLoading({
title: '上传语音中',
})
Yyc.uploadFile({
url: ctx + '/api/mini/homeschool/sendMessageAttachment',
filePath: that.data.tempFilePath,
name: 'fileupload',
formData: {
'type': 1
},
success(res) {
wx.hideLoading()
if (res.data.ret == 0) {
const data = res.data
that.setData({ voiceUrl: res.data.path })
that.realSend(that)
} else {
Util.tip('上传失败')
}

}
})
 

}else{
that.realSend(that)
}

},
touchdown: function () {
　　console.log("手指按下了...")
　　var _this = this;
　　_this.setData({
　　isSpeaking: true,
　　beginTime: new Date().getTime()
})
const recordManager = wx.getRecorderManager();
recordManager.onStop(function(res){
var tempFilePath = res.tempFilePath;
if (res.duration<3000){
Util.tip('录音时间太短哟')
return
}
console.log("tempFilePath: " + tempFilePath);
_this.setData({
tempFilePath: tempFilePath,
lastTime: parseInt(res.duration/1000),
voiceShow: true
})
})
recordManager.start(
{
duration:300000,
format:'mp3'
}
);
},
//手指抬起
touchup: function () {
console.log("手指抬起了...")
this.setData({
isSpeaking: false,
})
const recordManager = wx.getRecorderManager();
recordManager.stop()
},
//点击播放录音
gotoPlay: function (e) {
var filePath = e.currentTarget.dataset.key;
const InnerAudioContext = wx.createInnerAudioContext();
InnerAudioContext.src = filePath;
InnerAudioContext.play()
},

 对应的wxml如下：

<view wx:if="{{isSpeaking}}" class="microphone">
  <view>
      <image class="sound-style" src="../../images/home/voice.gif"></image>
      <text>按住说话</text>
  </view>
</view>

 语音的展示、删除以及播放wxml如下：

<view wx:if="{{voiceShow}}" class="common-list">
      <view class='audioContet' data-key="{{tempFilePath}}" bindtap="gotoPlay">
        <label>语音</label><label>{{lastTime}}"</label>
      </view>
      <image src='../../images/home/icon-closed.png' bindtap="delVideo"></image>
  </view>

 

转载于:https://www.cnblogs.com/sakura-lifangfang/p/11412739.html