小程序上传视频及预览(含后台)

最新推荐文章于 2026-03-28 10:29:48 发布

原创

最新推荐文章于 2026-03-28 10:29:48 发布 · 1.4w 阅读

标签

#小程序上传视频

收录于

本文介绍如何在小程序中使用wx.uploadFile方法上传视频，并且详细阐述了后台接口处理流程，实现视频预览功能。步骤包括：调用微信小程序API进行文件上传，后台接收并处理上传请求，最后展示返回数据。

上传视频，图片等都是调用wx.uploadFile，后台接口都不用改。
.wxml

<button bindtap="chooseVideo">
  添加视频</button>

<block wx:if="{
  
  {src != ''}}">
  <video src="{
  
  {src}}"></video>
</block>

.js

  Page({
  data: {
    src: ''
  },
  //选择视频
  chooseVideo: function() {
    var that = this
    wx.chooseVideo({
      success: function(res) {
        that.setData({
          src: res.tempFilePath,
        })
        that.uploadvideo();
      }
    })
  },
  uploadvideo: function() {
    var src = this.data.src;
    wx.uploadFile({
      url: '**************/Upload', //服务器接口
      filePath: src,
      header: {
        'content-type': 'multipart/form-data'
      },
      name: 'files',
      success: function(res) {
        console.log(res.data)
      },
      fail: function() {
        console.log('接口调用失败')
      }
    })
  }
})

后台接口