首页  >  文章  >  微信小程序  >  小程序开发怎么实现视频上传功能

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

王林
王林转载
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中文网其他相关文章!

声明:
本文转载于:csdn.net。如有侵权,请联系admin@php.cn删除