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

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

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

上传视频,图片等都是调用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('接口调用失败')
      }
    })
  }
})

后台接口

  [WebMethod(EnableSession = true)]
    
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值