小程序的圖片以及語音上傳

微信小程序作為一種比較新的前端技術，繼續保持了數據驅動的特點，小程序依附微信這個框架平台，提供了很多比較實用的開放接口，錄音和上傳照片就在其中，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>