微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)

简介: 微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)

上传视频功能

效果如下:

<!-- 上传 S -->
  <view class="img-list">
    <!-- 上传列表 -->
    <view class="upload-video">
      <block wx:if="{{src != ''}}">
        <video src="{{src}}" class="img-li"></video>
        <image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deleteVideo"></image>
      </block>
    </view>
    <block wx:for="{{imgList}}" wx:key="index">
    
    <!-- 视频 S -->
    <view class="img-li" wx:if="{{src == ''}}" bindtap="chooseVideo">
      <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
    </view>
    <!-- 视频 E -->
  </view>
  <!-- 上传 E -->
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    src: "",        // 上传视频
  },
  /**
   * 选择视频
   */
  chooseVideo: function() {
    var _this = this;
    wx.chooseVideo({
      success: function(res) {
        _this.setData({
          src: res.tempFilePath,
        })
      }
    })
  },
  /**
   * 上传视频 目前后台限制最大100M, 以后如果视频太大可以选择视频的时候进行压缩
   */
  uploadvideo: function() {
    var src = this.data.src;
    wx.uploadFile({
      url: '',
      methid: 'POST',           // 可用可不用
      filePath: src,
      name: 'files',              // 服务器定义key字段名称
      header: app.globalData.header,
      success: function() {
        console.log('视频上传成功')
      },
      fail: function() {
        console.log('接口调用失败')
      }
    })
  },
 
})
相关文章
|
3天前
|
小程序 安全 数据挖掘
陪玩语聊APP小程序定制开发模块功能
随着电竞行业的规范化,游戏陪玩软件兴起,提供专业陪玩服务。核心功能包括:多样化注册登录、用户资料展示、智能匹配筛选陪玩、语音互动(多人/私聊)、订单交易管理、陪玩入驻审核、数据分析、客服系统及社交功能。旨在融合游戏、语音聊天与社交,构建综合娱乐平台。
|
8天前
|
小程序 BI 定位技术
广州跑腿小程序功能开发让生活更方便
跑腿小程序整合生活服务,提供快捷的跑腿任务解决方案。用户通过手机号或微信注册登录,发布如取快递、买饭等需求;跑腿员接单并利用导航高效完成。支持订单管理、多种支付方式及评价反馈系统,确保服务质量。小程序还发送订单状态通知,进行数据统计分析以促进平台发展。
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“口腔助手”小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“口腔助手”小程序附带文章源码部署视频讲解等
9 3
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
12 1
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小演员招募小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小演员招募小程序附带文章源码部署视频讲解等
11 1
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的二手书籍拍卖小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的二手书籍拍卖小程序附带文章源码部署视频讲解等
9 1
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的时间管理小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的时间管理小程序附带文章源码部署视频讲解等
7 0
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的仓库点单小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的仓库点单小程序附带文章源码部署视频讲解等
14 0
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的美食推荐小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的美食推荐小程序附带文章源码部署视频讲解等
9 0
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的博达驾校预约小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的博达驾校预约小程序附带文章源码部署视频讲解等
11 0

热门文章

最新文章