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

上传视频功能

效果如下:

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

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/669696.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STL:stack和queue

文章目录 stack的介绍和使用stack的介绍stack的使用stack的模拟实现 queue的介绍和使用queue的介绍queue的使用queue的模拟实现 priority_queue的介绍和使用priority_queue的介绍priority_queue的使用优先级队列的模拟实现 deque的介绍deque的结构deque的缺陷为什么选择deque作…

Codeforces Round 949 (Div. 2 ABCD) 视频讲解

A. Turtle and Piggy Are Playing a Game Problem Statement Turtle and Piggy are playing a number game. First, Turtle will choose an integer x x x, such that l ≤ x ≤ r l \le x \le r l≤x≤r, where l , r l, r l,r are given. It’s also guaranteed that …

数据库与缓存⼀致性⽅案

数据库与缓存⼀致性⽅案 1、背景2、数据⼀致性⽅案设计3、数据⼀致性⽅案流程图4、关键代码4.1、 处理数据⼀致性的消息队列⼊⼝4.2、数据⼀致性配置的常量信息1、背景 现有的业务场景下,都会涉及到数据库以及缓存双写的问题,⽆论是先删除缓存,再更新数据,或者先更新数据,…

HCIP-Datacom-ARST自选题库__MAC【14道题】

一、单选题 1.缺省情况下&#xff0c;以下哪种安全MAC地址类型在设备重启后表项会丢失? 黑洞MAC地址 Sticky MAC地址 安全动态MAC地址 安全静态MAC地址 2.华为交换机MAC地址表中的动态sticky MAC地址的默认老化时间是多少秒? 300 不会老化 400 500 3.华为交换机MA…

Python 算法交易实验70 简单回顾

说明 感觉停滞了一段时间&#xff0c;本来qtv200应该在去年12月就迭代好了。回顾了一下原因&#xff1a; 1 工作的约束。因为量化现在是打辅助的角色(现在的工作还是比较香的)&#xff0c;去年上了项目&#xff0c;几乎与世隔绝的那种&#xff0c;打断了整体的节奏。2 信心的…

SDK开发

为什么需要Starter&#xff1f; 理想情况:开发者只需关心调用哪些接口&#xff0c;传递哪些参数就跟调用自己写的代码一样简单。 开发starter的好处&#xff1a;开发者引入之后&#xff0c;可以直接在application.yml中写配置&#xff0c;自动创建客户端。 starter开发流程 …

上位机图像处理和嵌入式模块部署(f407 mcu开发板基本测试)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们拿到一个新的开发板之后&#xff0c;一般都需要测试一下基本功能。这里面一部分功能是我们比较熟悉的&#xff0c;比如说led、key输入、串口、…

力扣Hot100-有效的括号(栈stack)

给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相同类型的左括…

泛型知识汇总

演示代码&#xff1a; package exercise;import java.util.Arrays;public class MyArrayList<E> {Object[] obj new Object[10];int size;public boolean add(E e) {obj[size] e;size;return true;}public E get(int index) {return (E) obj[index];}//没有这个函数&a…

JVM(Java虚拟机)笔记

面试常见&#xff1a; 请你谈谈你对JVM的理解?java8虚拟机和之前的变化更新?什么是OOM&#xff0c;什么是栈溢出StackOverFlowError? 怎么分析?JVM的常用调优参数有哪些?内存快照如何抓取&#xff1f;怎么分析Dump文件&#xff1f;谈谈JVM中&#xff0c;类加载器你的认识…

【记录】网络|没有路由器没有网线,分别使用手机或Windows电脑共享网络给ARM64开发板,应急连接

事情是这样的&#xff0c;我的开发板明明已经选择了记住热点 WiFi 密码&#xff0c;但是却没有在开机的时候自动连接&#xff0c;我又没有放显示器在身边&#xff0c;又不想为了这点事去找个显示器来&#xff0c;就非常难受。 我手边有的设备是&#xff1a; 笔记本电脑&#…

关于 c++ cout << endl; 的源码解释

这行语句非常常用。以前在王老师课上&#xff0c;老师提到过 endl 是一个函数模板。现给出这行语句的相关源码&#xff1a; 反汇编的依据如下&#xff1a; 接着是 谢谢

香橙派 Kunpeng Pro使用教程:从零开始打造个人私密博客

一、引言 在这个日益互联的世界中&#xff0c;单板计算机已经成为创新和个性化解决方案的重要载体。而在单板计算机领域&#xff0c;香橙派 Kunpeng Pro凭借其强大的性能和灵活的应用潜力&#xff0c;正逐渐吸引着全球开发者和技术爱好者的目光。 作为一款集成了华为的鲲鹏处…

领域建模(系统操作复习)

习题 问题 考察点 领域建模 识别概念类 固定模板 Conceptual Class Category Examples specifications,designs, or descriptions of things roles of people containers of other things things in a container abstract noun concepts organizations events processes (…

OpenAI 的 GPT-4o 是目前最先进的人工智能模型!如何在工作或日常生活中高效利用它?

OpenAI 的 GPT-4o 是目前最先进的人工智能模型&#xff01;如何在工作或日常生活中高效利用它&#xff1f; 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大…

开发板uboot与virtualbox虚拟机、windows11网络互通

环境&#xff1a;virtualbox中ubuntu22.04.4&#xff0c;开发板通过网线再经过拓展坞usb网卡跟windows11连接。连接如下&#xff1a; 1、关闭windows防火墙(重要) 2、先在VirtualBox的工具选项创建两个网络【仅主机(Host-Only)网络】和【NAT网络】 仅主机(Host-Only)网络的ip:…

二位偏序,P3660 [USACO17FEB] Why Did the Cow Cross the Road III G

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 P3660 [USACO17FEB] Why Did the Cow Cross the Road III G - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 二、解题报告 1、思路分析 二维偏序问题 我们将坐标按照第一维排序 然后树状数组维护区间内的…

树莓派LCD显示屏安装驱动详细教程

使用LCD显示屏有两种方式&#xff0c;1.如果你已安装好树莓派官方系统&#xff0c;需要单独安装驱动才可点亮显示屏。 2. 也可以直接烧录我们提供的系统 里面已含驱动程序。 一&#xff1a;连接方式 按照下图方式连接好LCD显示屏与树莓派主板 二&#xff1a;安装系统镜像&…

【Linux】如何利用linux项目自动化构建工具-make/Makefile以及vim编辑器构建两个小程序:倒计时和进度条

1.倒计时小程序 首先我们Linux中创建目录test1&#xff0c;该目录中包含了makefile文件&#xff0c;和main.c文件&#xff08;该文件是源文件用于编写倒计时程序的代码&#xff09;再进行依赖方法和依赖关系的确定&#xff1a; 利用vim编辑器编辑makefile文件&#xff1a; 注意…

基于react native的图片放大旋转效果二

基于react native的图片放大旋转效果二 const TaskReceiveModal ({ onClick }) > {const spinValue useRef(new Animated.Value(0)).current;const scaleValue useRef(new Animated.Value(0)).current;const spinAnimation useRef(null);const spin spinValue.interpol…