Rumah > applet WeChat > Pembangunan program mini > 小程序开发怎么实现视频上传功能

小程序开发怎么实现视频上传功能

王林
Lepaskan: 2020-12-17 09:07:57
ke hadapan
4537 orang telah melayarinya

小程序开发怎么实现视频上传功能

说明:

由于官方提供了API,所以我们直接调用就可以实现了。

(学习视频分享:编程视频

具体代码如下:

index.wxml

1

2

3

4

5

6

7

8

9

10

11

12

<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>

Salin selepas log masuk

index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

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;)

      }

    })

  }

})

Salin selepas log masuk

相关推荐:小程序开发教程

Atas ialah kandungan terperinci 小程序开发怎么实现视频上传功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan