写真のアップロードアプレットと声

次のようにマイクロ手紙比較的新しいフロントエンド技術として、アプレット、データ駆動型の機能を維持し続ける、小さなプログラム付属のマイクロは、より多くの実用的なオープンインタフェースを提供し、このフレームワークのプラットフォームを信じて、オーディオおよびwxmlコード、ここで写真をアップロードするには、次のとおりです。

<ビュークラス= 'importObj'> 
   <画像SRC = '.. / .. /画像/ホーム/アイコン-pic.png' bindtap = 'choosePic'> </画像> 
   <画像SRC =」.. / .. /画像/ホーム/アイコン-sound.png」bindtouchstart = "タッチダウン" bindtouchend = "タッチアップ"> </イメージ> 
</ビュー>

対応するJSは次のとおりです。

choosePic：関数（）{ 
    IF（this.data.getImg.length> = 6）{ 
      Util.tip（ '最多选择六张图片'）
      リターン
    } 
    この= VAR。
    VaRのimgcount = 6 - this.data.getImg.length 
    wx.chooseImage（{ 
      カウント：imgcountを、
      たSizeType：[ '圧縮']、
      たsourceType：[ 'アルバム'、 'カメラ']、
      成功（RES）{ 
        CONST tempFilePathsの=のRES .tempFilePaths; 
        IF（tempFilePaths.length> 0）{ 
          wx.showLoading（{ 
            タイトル： '上传中'、
            マスク：真
          }）
          VaRの約束= [];  
          のための（VAR i = 0; I <tempFilePaths.length; iは++） {
            promises.push（that.uploadImg（すなわち、tempFilePaths [i]）と）
          } 
          Promise.all（約束）.then（関数（）{ 
            wx.hideLoading（）
          }）
        } 
      } 
    }）
  }、
  uploadImg：関数（すなわち、パス）{ 
    {、新しいプロミス（関数（決意を返す拒否）
      Yyc.uploadFileを（{ 
        URL：CTX + '/ API /ミニ/ホームスクール/ sendMessageAttachment'、
        filePathに：パス
        名： 'ファイルアップロード'、
        FORMDATA：{ 
          'タイプ'：1 
        }、
        成功（RES）{ 
          IF（res.data.ret = = 0）{  
            CONSTデータ= res.data
            VARリスト= that.data.getImg; 
            VARあるnewData = {IMG：data.path}。
            （あるnewData）lists.push。
            that.setData（that.data）。
            解決（）
          }他{ 
            Util.tip（ '上传失败'） 
            （拒否）; 
          } 
        } 
      }）
    }）
  }

それは我々が使用するような単一のアップロード数を制御するなど、より簡潔なパラメータ、および選択されたファイルの種類、音声録音およびアップロードの比率を、提供、ネイティブJS方法、マイクロチャネル小さなプログラムの転送などの写真やH5の方法をアップロードインタフェースを必要としないアナログ表示長押しイベント、音声と画像でのGIFの数字をアップロードし、されます、あなたはまた、プレイをクリックすると音声入力の成功の後、参照だけのために、実際のプロジェクトのアップロードのコードのように表示され実現します以下のように、使用するディスプレイのためのクラス・パラメータの長さを返します。

confirmSend：関数（）{ 
この= VAR 
（that.data.voiceShow）{もし
wx.showLoading（{ 
'上传语音中'、タイトル
}）
Yyc.uploadFile（{ 
URL：CTX +「/ API /ミニ/ホームスクールを/ sendMessageAttachment」、
filePathに：that.data.tempFilePath、
名称： 'ファイルアップロード'、
FORMDATA：{ 
'タイプ'：1 
}、
成功（RES）{ 
wx.hideLoading（）
IF（res.data.ret == 0）{ 
CONSTデータ= res.data 
that.setData（{voiceUrl：res.data.path}）
that.realSend（その）
}他{ 
Util.tip（ '上传失败'）
} 

} 
}）
 

}他{ 
that.realSend（すなわち）
}
 
}、
タッチダウン：関数（）{ 
形式： 'MP3'
　　console.log（ "手指按下了..."）
　　するvar _this =この; 
　　_this.setData（{ 
　　isSpeaking：真、
　　BEGINTIME：新しい日付（）getTime（）
}）
CONST recordManager = wx.getRecorderManager（）。
recordManager.onStop（関数（RES）{ 
VAR tempFilePath = res.tempFilePath; 
IF（res.duration <3000）{ 
Util.tip（ '录音时间太短哟'）
リターン
} 
はconsole.log（ "tempFilePath：" + tempFilePath） ; 
_this.setData（{ 
tempFilePath：tempFilePath、
lastTime：のparseInt（res.duration / 1000）、
voiceShow：真
}）
}）
recordManager.start（
{ 
期間：300000、
}、
//手指抬起
} 
）; 
タッチアップ：関数（）{ 
にconsole.log（ "手指抬起了..."）
this.setData（{ 
isSpeaking：偽
}）
CONST recordManager = wx.getRecorderManager（）。
recordManager.stop（）
} 
//点击播放录音
gotoPlay：機能（E）{ 
VAR filePathに= e.currentTarget.dataset.key。
CONST InnerAudioContext = wx.createInnerAudioContext（）。
InnerAudioContext.src = filePathに。
InnerAudioContext.play（）
}、

wxml対応することは、次のとおりです。

<ビューWX：もし= "{{isSpeaking}}"クラス= "マイク"> 
  <表示> 
      <画像クラス= "音スタイル" SRC = "../../画像/ホーム/ voice.gif"> < /画像> 
      <テキスト>按住说话</テキスト> 
  </ビュー> 
</ビュー>

音声表示、削除、および次のようにwxml遊びます：

<ビューWX：もし= "{{voiceShow}}"クラス= "共通リスト"> 
      <ビュークラス= 'audioContet'データ・キー= "{{tempFilePath}}" bindtap = "gotoPlay"> 
        <ラベル>语音< /ラベル> <ラベル> {{lastTime}} "</ label>は
      </表示> 
      <画像SRC = '.. / .. /画像/ホーム/アイコンclosed.png' bindtap = "delVideo"> </画像> 
  </ビュー>

写真のアップロードアプレットと声

おすすめ