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

最新推荐文章于 2025-02-18 11:16:20 发布
最新推荐文章于 2025-02-18 11:16:20 发布
阅读量1.6w 收藏 164
点赞数 26
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543264/article/details/106686210
版权

微信小程序有自己封装好的我们直接拿过来用就可以了

接下来我们看看如何实现的吧

 

上传图片功能

效果如下:

单图上传 

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
        })
      }
    })
  },
 
})

wxml

<!-- 上传 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 -->

js

 

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
        })
      }
    })
  },
 
})

上传视频功能

效果如下:

wxml

<!-- 上传 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 -->

js 

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

})

将上传图片 / 上传视频功能整合在一起

效果如下:

wxml

<!-- 上传 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 -->

js 

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

共用wxss

/* 上传的图片 */
.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;
}

学习讨论群

QQ群: 1102727334

微信小程序---上传图片（视频）功能（单个/多个）
weixin_43452154的博客
07-29 2786
只介绍图片上传的方法，视频上传的方法和图片上传的方法类似，就不一一说明啦，不懂的话可以私聊我。二、点击图片调用add_img方法（）
微信小程序图片视频上传
weixin_47106572的博客
05-20 744
1,图片上传功能 picUpload.wxml <!-- 上传 S --> <view class="img-list"> <!-- 上传列表 --> <block wx:for="{{imgList}}" wx:key="index"> <view class="img-li"> <view class="img-li" bindtap="previewImg"> &lt
微信小程序上传文件及注意事项
最新发布
2302_78685420的博客
02-18 1204
上传组件采用 Vue2 与 UView 进行开发，只兼容小程序。文章提供微信小程序上传所需的前置条件、问题分析及组件源码
微信小程序开发之视频上传
Callback的博客
08-30 4万+
官方提供了API，基本直接调用就可以了 index.wxml &lt;view class="page-body-info"&gt; &lt;block wx:if="{{src === ''}}"&gt; &lt;view class="image-plus image-plus-nb" bindtap="chooseVideo"&gt;
微信小程序 上传视频方法
weixin_52541520的博客
05-29 4920
<button bindtap = "chooseVideo" >上传视频</button> const app = getApp() const aesUtil = require('../../../utils/util.js') Component({ options: { styleIsolation: 'apply-shared' //页面样式将影响到组件,但组件中指定的样式不会影响页面 }, /** * 组件的属性列表 */ ...
小程序上传图片/视频
hql1024的博客
03-10 746
<view class="col"> <view class="exhibit" wx:for="{{upload_list}}" wx:key='index'> <image src="{{item}}"></image> <view class="del" data-...
小程序实现上传视频功能
10-14
主要为大家详细介绍了小程序实现上传视频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于微信小程序的短视频系统(源码)
06-12
【基于微信小程序的短视频系统(源码)】是一款利用微信小程序技术开发的短视频分享平台，其核心在于为用户提供便捷的短视频拍摄、编辑、分享以及观看功能。在这个系统中，用户可以快速浏览各种有趣的短视频，同时也...
微信小程序交易平台/基于微信小程序的购物系统/基于微信小程序的电商平台/基于微信小程序的商品销售系统
weixin_47958760的博客
08-06 1507
随着当今网络的发展，时代的进步，各行各业也在发生着变化，于是网络已经逐步进入人们的生活，给我们生活或者工作提供了新的方向新的可能。 本毕业设计的内容是设计实现一个微信小程序交易平台。使用微信开发者是以java语言进行开发，MYSQL为数据库开发平台，Tomcat网络信息服务作为应用服务器。微信小程序交易平台的功能已基本实现，主要包括有商家、用户、商品分类、商品信息、商品咨询等功能。本微信小程序软件架构选择B/S模式,总体功能模块运用自顶向下的分层思想。再然后就是实现系统并进行代码编写实现功能。论文的最后
小程序上传视频组件
03-29
一个小demo，不是用来授权用户信息和图片上传的一个小视频平台demo，可以供大家参考
小程序上传图片视频文件(带删除功能)demo
08-08
微信小程序上传图片视频文件(带删除功能)demo，小程序
uniapp 微信小程序小票打印机打印教程（超详细讲解） 完整代码，下载后可直接使用
07-24
在本文中，我们将深入探讨如何使用uniapp框架和微信小程序来实现小票打印机的打印功能。这个教程将提供一个详尽的步骤指南，确保你能够理解并应用到实际项目中。我们将涵盖以下知识点： 1. **uniapp简介**：uniapp...
【微信小程序】上传图片，上传视频及预览
qq_25285531的博客
11-07 693
wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src='{{urls}}' /> </view> <view class="prew_video" hidden="{{chooesVideo==''}}"> <video b...
微信小程序之图片、音频、视频上传（附前后端代码示例）
热门推荐
wqx2080的博客
06-26 4万+
最近搞小程序开发，碰到了图片上传和音视频上传的问题，百度了下，网上示例不多，鄙人不才，就用TP3.2.3自己写了一个小程序上传图片、音视频的示例，刚好也是项目所需。能力有限，不喜勿喷，仅供新手参考。 ，上传作品要求为图片、音频或者视频。话不多说，上代码！ 前端代码： 点击上传图片，图片会显示预览。效果如下： js交互部分的代码如下: wxml : 用的catchtao:get='g...
微信小程序[第十二篇] -- 上传视频
weixin_33795743的博客
11-14 808
通过上一篇的学习，我们可以成功将宝宝的照片传到指定相册了，但是可爱的宝宝岂能只有照片，小视频必须同步跟上，莫问题！咱这篇就来一个视频上传的实现。 俺家小核桃镇贴。 服务端 其实对于yii2程序而言，如果不考虑转码、获取帧等事情，上传图片和上传一个视频差别并不大，我们还是先来构造接口实现。 考虑到在我们的程序中视频和照片都是存储在phot...
一、微信小程序(简单上传)-存储图片视频文件
RD_Xiaobai的博客
04-14 1647
cos对象存储，可以存储图片视频以及任何格式的文档。以下介绍怎么使用cos存储图片视频文件，需要做什么配置，如何使用。
微信小程序——上传视频
Dove言和
07-23 665
https://segmentfault.com/a/1190000012007132
微信小程序 上传视频
09-06
在微信小程序中上传视频可以通过以下步骤实现： 1. 首先，你需要在小程序中引入相关的插件或组件来支持视频上传功能。你可以通过扫描微信小程序二维码或在小程序中搜索相应的插件进行体验和使用。 2. 在代码中设置上传视频的功能。和上传图片类似，你需要编写相应的代码来实现视频的上传。需要注意的是，由于视频体积较大，每次只能上传一个视频。 3. 通过上述步骤，你可以成功将视频上传到指定的相册。这样，你就可以在小程序中同步展示宝宝的照片和小视频了。 总结：在微信小程序中上传视频的过程和上传图片基本相同，只需要引入插件、设置上传功能并进行相应的代码编写即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [仿抖音播放微信小程序1.0](https://download.csdn.net/download/weixin_40966979/85808997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [微信小程序[第十二篇] -- 上传视频](https://blog.csdn.net/weixin_33795743/article/details/88949716)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值