AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2024-06-06 685
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)

单图

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgList: "",          // 上传图片
  },
  // 点击添加选择
  chooseSource: function () {
    var _this = this;
    wx.showActionSheet({
      itemList: ["拍照", "从相册中选择"],
      itemColor: "#000000",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            _this.imgWShow("camera")        //拍照
          } else if (res.tapIndex == 1) {
            _this.imgWShow("album")      //相册
          }
        }
      }
    })
  },
  // 点击调用手机相册/拍照
  imgWShow: function (type) {
    var _this = this;
    let len = 0;
    if (_this.data.imgList != null) {
      len = _this.data.imgList.length
    }   //获取当前已有的图片
    wx.chooseImage({
      count: 6 - len,     //最多还能上传的图片数,这里最多可以上传5张
      sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
      sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
      success: function (res) {
        wx.showToast({
          title: '正在上传...',
          icon: "loading",
          mask: true,
          duration: 1000
        })
        // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
        var imgList = res.tempFilePaths
       
        _this.setData({
          imgList: imgList 
        })
      },
      fail: function () {
        wx.showToast({
          title: '图片上传失败',
          icon: 'none'
        })
        return;
      }
    })
  },
  // 预览图片
  previewImg: function (e) {
    let index = e.target.dataset.index;
    let _this = this;
    wx.previewImage({
      current: _this.data.imgList[index],
      urls: _this.data.imgList
    })
  },
  /**
   * 点击删除图片
   */
  deleteImg: function (e) {
    var _this = this;
    var imgList = _this.data.imgList;
    var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
    wx.showModal({
      title: '提示',
      content: '确认要删除该图片吗?',
      success: function (res) {
        if (res.confirm) {
          console.log("点击确定了")
          imgList.splice(index, 1);
        } else if (res.cancel) {
          console.log("点击取消了");
          return false
        }
        _this.setData({
          imgList
        })
      }
    })
  },
 
})
<!-- 上传 S -->
  <view class="img-list">
    <!-- 上传列表 -->
    <block wx:for="{{imgList}}" wx:key="index">
      <view class="img-li">
        <view class="img-li" bindtap="previewImg">
          <image class="uploading-icon" src="{{item}}"></image>
        </view>
        <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image>
      </view>
    </block>
    <!-- 上传图片 S -->
    <view class="img-li" wx:if="{{imgList.length<=8}}" bindtap="chooseSource">
      <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
    </view>
    <!-- 上传图片 E -->
  </view>
  <!-- 上传 E -->
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgList: [],          // 上传图片列表
  },
  // 点击添加选择
  chooseSource: function () {
    var _this = this;
    wx.showActionSheet({
      itemList: ["拍照", "从相册中选择"],
      itemColor: "#000000",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            _this.imgWShow("camera")        //拍照
          } else if (res.tapIndex == 1) {
            _this.imgWShow("album")      //相册
          }
        }
      }
    })
  },
  // 点击调用手机相册/拍照
  imgWShow: function (type) {
    var _this = this;
    let len = 0;
    if (_this.data.imgList != null) {
      len = _this.data.imgList.length
    }   //获取当前已有的图片
    wx.chooseImage({
      count: 6 - len,     //最多还能上传的图片数,这里最多可以上传5张
      sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
      sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
      success: function (res) {
        wx.showToast({
          title: '正在上传...',
          icon: "loading",
          mask: true,
          duration: 1000
        })
        // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
        var imgList = res.tempFilePaths
        let tempFilePathsImg = _this.data.imgList
        // 获取当前已上传的图片的数组
        var tempFilePathsImgs = tempFilePathsImg.concat(imgList)
        _this.setData({
          imgList: tempFilePathsImgs
        })
      },
      fail: function () {
        wx.showToast({
          title: '图片上传失败',
          icon: 'none'
        })
        return;
      }
    })
  },
  // 预览图片
  previewImg: function (e) {
    let index = e.target.dataset.index;
    let _this = this;
    wx.previewImage({
      current: _this.data.imgList[index],
      urls: _this.data.imgList
    })
  },
  /**
   * 点击删除图片
   */
  deleteImg: function (e) {
    var _this = this;
    var imgList = _this.data.imgList;
    var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
    wx.showModal({
      title: '提示',
      content: '确认要删除该图片吗?',
      success: function (res) {
        if (res.confirm) {
          console.log("点击确定了")
          imgList.splice(index, 1);
        } else if (res.cancel) {
          console.log("点击取消了");
          return false
        }
        _this.setData({
          imgList
        })
      }
    })
  },
 
})

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

<!-- 上传 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">
      <view class="img-li">
        <view class="img-li" bindtap="previewImg">
          <image class="uploading-icon" src="{{item}}"></image>
        </view>
        <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image>
      </view>
    </block>
    <!-- 上传图片/视频 S -->
    <view class="img-li" wx:if="{{imgList.length<=8}}" bindtap="actioncnt">
      <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
    </view>
    <!-- 上传图片/视频 E -->
  </view>
  <!-- 上传 E -->


// pages/my/my-release-experience-report/index.js
const app = getApp()
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgList: [],          // 上传列表
    src: "",        // 上传视频
  },
  // 点击添加选择
  chooseSource: function () {
    var _this = this;
    wx.showActionSheet({
      itemList: ["拍照", "从相册中选择"],
      itemColor: "#000000",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            _this.imgWShow("camera")        //拍照
          } else if (res.tapIndex == 1) {
            _this.imgWShow("album")      //相册
          }
        }
      }
    })
  },
  // 点击调用手机相册/拍照
  imgWShow: function (type) {
    var _this = this;
    let len = 0;
    if (_this.data.imgList != null) {
      len = _this.data.imgList.length
    }   //获取当前已有的图片
    wx.chooseImage({
      count: 6 - len,     //最多还能上传的图片数,这里最多可以上传5张
      sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
      sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
      success: function (res) {
        wx.showToast({
          title: '正在上传...',
          icon: "loading",
          mask: true,
          duration: 1000
        })
        // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
        var imgList = res.tempFilePaths
        let tempFilePathsImg = _this.data.imgList
        // 获取当前已上传的图片的数组
        var tempFilePathsImgs = tempFilePathsImg.concat(imgList)
        _this.setData({
          imgList: tempFilePathsImgs
        })
      },
      fail: function () {
        wx.showToast({
          title: '图片上传失败',
          icon: 'none'
        })
        return;
      }
    })
  },
  // 预览图片
  previewImg: function (e) {
    let index = e.target.dataset.index;
    let _this = this;
    wx.previewImage({
      current: _this.data.imgList[index],
      urls: _this.data.imgList
    })
  },
  /**
   * 点击删除图片
   */
  deleteImg: function (e) {
    var _this = this;
    var imgList = _this.data.imgList;
    var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
    wx.showModal({
      title: '提示',
      content: '确认要删除该图片吗?',
      success: function (res) {
        if (res.confirm) {
          console.log("点击确定了")
          imgList.splice(index, 1);
        } else if (res.cancel) {
          console.log("点击取消了");
          return false
        }
        _this.setData({
          imgList
        })
      }
    })
  },
  /**
   * 点击删除视频
   */
  deleteVideo: function(e) {
    var _this = this;
    var src = _this.data.src;
    var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
    wx.showModal({
      title: '提示',
      content: '确认要删除该视频吗?',
      success: function (res) {
        if (res.confirm) {
          console.log("点击确定了")
          var unsrc = '';
          _this.setData({
            src: unsrc
          })
        } else if (res.cancel) {
          console.log("点击取消了");
          return false
        }
      }
    })
  },
  /**
   * 图片  视频 选择框
   */
  actioncnt: function() {
    var _this = this;
    wx.showActionSheet({
      itemList: ['图片', '视频'],
      success: function(res) {
        if(res.tapIndex == 0) {
          _this.chooseSource()
        }
        if(res.tapIndex == 1) {
          _this.chooseVideo()
        }
      },
      fail: function(res) {
        console.log(res.errMsg)
      }
    })
  },
  /**
   * 选择视频
   */
  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('接口调用失败')
      }
    })
  },
})
/* 上传的图片 */
.img-list {
  display: flex;
  flex-wrap: wrap;
}
.img-li {
  width: 200rpx;
  height: 200rpx;
  margin-right: 39rpx;
  margin-bottom: 23rpx;
}
 
.img-li:first-child {
  margin-right: 0;
}
.img-li image {
  width: 100%;
  height: 100%;
}
.icon-delete {
  width: 28rpx !important;
  height: 28rpx !important;
  position: relative;
  float: right;
  margin-top: -229rpx;
  margin-right: -15rpx;
  z-index: 99;
}
.icon-deletes {
  width: 28rpx !important;
  height: 28rpx !important;
  position: relative;
  float: right;
  margin-top: -9rpx;
  margin-left: -10rpx;
  margin-right: 29rpx;
  z-index: 99;
}
.content-input-z {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999999;
}
 
.content-input-z {
  margin-top: 31rpx;
}
 
.content-input-z view image {
  width: 32rpx;
  height: 31rpx;
  margin-right: 11rpx;
}
.content-input-z view {
  display: flex;
  align-items: center;
}

文章标签：
小程序
关键词：
微信视频
微信功能
微信小程序功能
微信小程序视频
微信上传图片
她说她一如既往的爱我
目录
相关文章
游客vx6uejvd6s6ck
|
3月前
|
Java 数据安全/隐私保护 计算机视觉
手机虚拟视频替换摄像头，QQ微信虚拟视频插件，jar代码分享
这段代码演示了如何使用JavaCV捕获视频流、处理帧数据并输出到虚拟摄像头设备。它需要JavaCV和OpenCV库支持
游客vx6uejvd6s6ck
259 4
卓伊凡
|
7月前
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
卓伊凡
457 1
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
赣州云智科技的技术铺子
|
7月前
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】十八、如何识别用户上传图片中的人体、运动、动作、姿态？
【云智AI运动识别小程序插件】为小程序提供人体、运动及姿态检测的AI能力，本地引擎支持10余种运动，无需后台服务，具备快速、低成本等优势。本文介绍如何通过Canvas方案读取用户上传图片的像素数据，实现人体检测与姿态分析功能，代码简单高效，适合快速集成。更多内容欢迎交流！
赣州云智科技的技术铺子
196 11
蚝油菜花
|
8月前
|
人工智能 开发框架 机器人
AstrBot：轻松将大模型接入QQ、微信等消息平台，打造多功能AI聊天机器人的开发框架，附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架，支持多种大语言模型和消息平台，具备多轮对话、语音转文字等功能。
蚝油菜花
4427 15
AstrBot：轻松将大模型接入QQ、微信等消息平台，打造多功能AI聊天机器人的开发框架，附详细教程
通义灵码
|
8月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码：完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码：完全免费+实战教程+微信贪吃蛇小程序
通义灵码
576 8
小Q_dream
|
8月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言，仅仅需要点击授权按钮，便能够完成登录操作，无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作，这种便捷的登录方式极大地提升了用户的使用体验
小Q_dream
2429 12
赣州云智科技的技术铺子
|
10月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力，支持本地原生识别，无需后台服务，具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别，包括视频解码抽帧和人体识别的实现方法。
赣州云智科技的技术铺子
409 10
chnjames
|
12月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器：简繁体切换功能完全指南
随着全球化的发展，支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能，以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数，开发者可以方便地实现语言切换，从而提升用户体验。文章中还附带了示例代码和效果图，帮助读者更好地理解和应用这一功能。
chnjames
576 0
微信小程序多语言切换神器：简繁体切换功能完全指南
bruce_xiaowei
|
12月前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
bruce_xiaowei
101 2
周一同学Zelina
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制，并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
周一同学Zelina
183 0
切西瓜法实现微信抢红包功能

热门文章

最新文章

  • 1
    一键搞定本土认证难题，AnalyticDB版Supabase助力AI应用实现支付宝&微信登录
  • 2
    抖音微信爆款小游戏大全：免费休闲/竞技/益智/PHP+Java全筏开源开发
  • 3
    “企业微信iPad协议”凌晨断链：当最后一台测试机决定集体沉默
  • 4
    一键搞定本土认证难题，AnalyticDB版Supabase助力AI应用实现支付宝&微信登录
  • 5
    “企业微信iPad协议”沉默72小时后，一条群公告把掉粉率拉回0%
  • 6
    “企业微信iPad协议”第 0x04 天：当朋友圈接口在凌晨 2:14 突然返回 404
  • 7
    当“企业微信协议”遇上旧iPad：一条被遗忘的推送如何撬动千万订单
  • 8
    热门小程序源码合集：微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
  • 9
    商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
  • 10
    【快递鸟】选择对接你的物流商城/小程序的物流API平台
  • 1
    热门小游戏源码（Python+PHP）下载-微信小程序游戏源码Unity发实战指南​
    280
  • 2
    微信小程序API集成京东库存，移动端销量暴涨！
    90
  • 3
    微信小程序+淘宝API，无缝购物体验提升复购率！
    129
  • 4
    weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
    444
  • 5
    weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
    158
  • 6
    weixin116大学生就业平台微信小程序+ssm(文档+源码)_kaic
    275
  • 7
    微信小程序开发全流程：从注册到上线的完整指南
    2157
  • 8
    技术小白如何利用DeepSeek半小时开发微信小程序？
    1940
  • 9
    微信小程序数据绑定与事件处理：打造动态交互体验
    269
  • 10
    微信小程序页面导航与路由：实现多页面跳转与数据传递
    624

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 微信移动客户端-数据存储优化实践
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证