微信小プログラム音声録音機能とファイル(ppt、word、excel、pdf、txtフォーマット)アップロード

25834 ワード

音声録音
注意:開発者ツールは音声ファイルを受信できないので、本体を使ってテストをデバッグしますよ~
構想:小プログラム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/qdheyongjie
    よろしくお愿いします!更新し続けるよ❤️