小程序上传视频

最新推荐文章于 2025-06-16 10:53:39 发布

JSN___不像码农的码农

最新推荐文章于 2025-06-16 10:53:39 发布

阅读量277

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序 js 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/JSN___/article/details/110652564

js 同时被 2 个专栏收录

75 篇文章

订阅专栏

小程序

10 篇文章

订阅专栏

本文介绍了一个小程序中实现视频上传的功能，包括使用wxml和js代码选择及上传视频至服务器的过程。详细展示了如何通过wx.chooseVideo选取视频，并通过wx.uploadFile上传至指定URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序上传视频

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>
      </block>
      <block wx:if="{{src != ''}}">
        <video src="{{src}}" class="video"></video>
      </block>
    </view>

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('接口调用失败')
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})