ホームページ  >  記事  >  WeChat アプレット  >  小規模なプログラム開発で動画アップロード機能を実装する方法

小規模なプログラム開発で動画アップロード機能を実装する方法

王林
王林転載
2020-12-17 09:07:574166ブラウズ

小規模なプログラム開発で動画アップロード機能を実装する方法

注:

公式 API が提供されているので、それを直接呼び出すことで実現できます。

(学習ビデオ共有: プログラミングビデオ)

具体的なコードは次のとおりです:

index.wxml

 <view class="page-body-info">
      <block wx:if="{{src === &#39;&#39;}}">
        <view class="image-plus image-plus-nb" bindtap="chooseVideo">
          <view class="image-plus-horizontal"></view>
          <view class="image-plus-vertical"></view>
        </view>
        <view class="image-plus-text">添加视频</view>
      </block>
      <block wx:if="{{src != &#39;&#39;}}">
        <video src="{{src}}" class="video"></video>
      </block>
    </view>

index .js

Page({
  data: {
    src: &#39;&#39;
  },
 //选择视频
  chooseVideo: function() {
    var that = this
    wx.chooseVideo({
      success: function(res) {
        that.setData({
          src: res.tempFilePath,
        })
      }
    })
  },
  //上传视频 目前后台限制最大100M,以后如果视频太大可以在选择视频的时候进行压缩
  uploadvideo: function() {
    var src = this.data.src;
    wx.uploadFile({
      url: &#39;http://172.16.98.36:8080/upanddown/upload2&#39;,//服务器接口
      method: &#39;POST&#39;,//这句话好像可以不用
      filePath: src,
      header: {
        &#39;content-type&#39;: &#39;multipart/form-data&#39;
      },
      name: &#39;files&#39;,//服务器定义的Key值
      success: function() {
        console.log(&#39;视频上传成功&#39;)
      },
      fail: function() {
        console.log(&#39;接口调用失败&#39;)
      }
    })
  }
})

関連する推奨事項: 小さなプログラム開発チュートリアル

以上が小規模なプログラム開発で動画アップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。