小程序开发怎么实现视频上传功能
程序员文章站
2022-03-11 18:18:28
...
说明:
由于官方提供了API,所以我们直接调用就可以实现了。
(学习视频分享:编程视频)
具体代码如下:
index.wxml
<view class="page-body-info"> <block wx:if="{{src === ''}}"> <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 != ''}}"> <video src="{{src}}" class="video"></video> </block> </view>
index.js
Page({ data: { src: '' }, //选择视频 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: 'http://172.16.98.36:8080/upanddown/upload2',//服务器接口 method: 'POST',//这句话好像可以不用 filePath: src, header: { 'content-type': 'multipart/form-data' }, name: 'files',//服务器定义的Key值 success: function() { console.log('视频上传成功') }, fail: function() { console.log('接口调用失败') } }) } })
相关推荐:小程序开发教程
以上就是小程序开发怎么实现视频上传功能的详细内容,更多请关注其它相关文章!