devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：凡人多烦事01 | 2024-03-27 17:56:41

赞

踩

微信小程序type提交视频文件图片

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

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

 

上传图片功能

效果如下:

单图上传 

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     imgList: "",          // 上传图片
  8.   },
  9.   // 点击添加选择
  10.   chooseSource: function () {
  11.     var _this = this;
  12.     wx.showActionSheet({
  13.       itemList: ["拍照", "从相册中选择"],
  14.       itemColor: "#000000",
  15.       success: function (res) {
  16.         if (!res.cancel) {
  17.           if (res.tapIndex == 0) {
  18.             _this.imgWShow("camera")        //拍照
  19.           } else if (res.tapIndex == 1) {
  20.             _this.imgWShow("album")      //相册
  21.           }
  22.         }
  23.       }
  24.     })
  25.   },
  26.   // 点击调用手机相册/拍照
  27.   imgWShow: function (type) {
  28.     var _this = this;
  29.     let len = 0;
  30.     if (_this.data.imgList != null) {
  31.       len = _this.data.imgList.length
  32.     }   //获取当前已有的图片
  33.     wx.chooseImage({
  34.       count: 6 - len,     //最多还能上传的图片数,这里最多可以上传5张
  35.       sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
  36.       sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
  37.       success: function (res) {
  38.         wx.showToast({
  39.           title: '正在上传...',
  40.           icon: "loading",
  41.           mask: true,
  42.           duration: 1000
  43.         })
  44.         // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
  45.         var imgList = res.tempFilePaths
  46.        
  47.         _this.setData({
  48.           imgList: imgList 
  49.         })
  50.       },
  51.       fail: function () {
  52.         wx.showToast({
  53.           title: '图片上传失败',
  54.           icon: 'none'
  55.         })
  56.         return;
  57.       }
  58.     })
  59.   },
  60.   // 预览图片
  61.   previewImg: function (e) {
  62.     let index = e.target.dataset.index;
  63.     let _this = this;
  64.     wx.previewImage({
  65.       current: _this.data.imgList[index],
  66.       urls: _this.data.imgList
  67.     })
  68.   },
  69.   /**
  70.    * 点击删除图片
  71.    */
  72.   deleteImg: function (e) {
  73.     var _this = this;
  74.     var imgList = _this.data.imgList;
  75.     var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
  76.     wx.showModal({
  77.       title: '提示',
  78.       content: '确认要删除该图片吗?',
  79.       success: function (res) {
  80.         if (res.confirm) {
  81.           console.log("点击确定了")
  82.           imgList.splice(index, 1);
  83.         } else if (res.cancel) {
  84.           console.log("点击取消了");
  85.           return false
  86.         }
  87.         _this.setData({
  88.           imgList
  89.         })
  90.       }
  91.     })
  92.   },
  93.  
  94. })

wxml

  1. <!-- 上传 S -->
  2.   <view class="img-list">
  3.     <!-- 上传列表 -->
  4.     <block wx:for="{{imgList}}" wx:key="index">
  5.       <view class="img-li">
  6.         <view class="img-li" bindtap="previewImg">
  7.           <image class="uploading-icon" src="{{item}}"></image>
  8.         </view>
  9.         <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image>
  10.       </view>
  11.     </block>
  12.     <!-- 上传图片 S -->
  13.     <view class="img-li" wx:if="{{imgList.length<=8}}" bindtap="chooseSource">
  14.       <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
  15.     </view>
  16.     <!-- 上传图片 E -->
  17.   </view>
  18.   <!-- 上传 E -->

js

 

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     imgList: [],          // 上传图片列表
  8.   },
  9.   // 点击添加选择
  10.   chooseSource: function () {
  11.     var _this = this;
  12.     wx.showActionSheet({
  13.       itemList: ["拍照", "从相册中选择"],
  14.       itemColor: "#000000",
  15.       success: function (res) {
  16.         if (!res.cancel) {
  17.           if (res.tapIndex == 0) {
  18.             _this.imgWShow("camera")        //拍照
  19.           } else if (res.tapIndex == 1) {
  20.             _this.imgWShow("album")      //相册
  21.           }
  22.         }
  23.       }
  24.     })
  25.   },
  26.   // 点击调用手机相册/拍照
  27.   imgWShow: function (type) {
  28.     var _this = this;
  29.     let len = 0;
  30.     if (_this.data.imgList != null) {
  31.       len = _this.data.imgList.length
  32.     }   //获取当前已有的图片
  33.     wx.chooseImage({
  34.       count: 6 - len,     //最多还能上传的图片数,这里最多可以上传5张
  35.       sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
  36.       sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
  37.       success: function (res) {
  38.         wx.showToast({
  39.           title: '正在上传...',
  40.           icon: "loading",
  41.           mask: true,
  42.           duration: 1000
  43.         })
  44.         // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
  45.         var imgList = res.tempFilePaths
  46.         let tempFilePathsImg = _this.data.imgList
  47.         // 获取当前已上传的图片的数组
  48.         var tempFilePathsImgs = tempFilePathsImg.concat(imgList)
  49.         _this.setData({
  50.           imgList: tempFilePathsImgs
  51.         })
  52.       },
  53.       fail: function () {
  54.         wx.showToast({
  55.           title: '图片上传失败',
  56.           icon: 'none'
  57.         })
  58.         return;
  59.       }
  60.     })
  61.   },
  62.   // 预览图片
  63.   previewImg: function (e) {
  64.     let index = e.target.dataset.index;
  65.     let _this = this;
  66.     wx.previewImage({
  67.       current: _this.data.imgList[index],
  68.       urls: _this.data.imgList
  69.     })
  70.   },
  71.   /**
  72.    * 点击删除图片
  73.    */
  74.   deleteImg: function (e) {
  75.     var _this = this;
  76.     var imgList = _this.data.imgList;
  77.     var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
  78.     wx.showModal({
  79.       title: '提示',
  80.       content: '确认要删除该图片吗?',
  81.       success: function (res) {
  82.         if (res.confirm) {
  83.           console.log("点击确定了")
  84.           imgList.splice(index, 1);
  85.         } else if (res.cancel) {
  86.           console.log("点击取消了");
  87.           return false
  88.         }
  89.         _this.setData({
  90.           imgList
  91.         })
  92.       }
  93.     })
  94.   },
  95.  
  96. })

上传视频功能

效果如下:

wxml

  1. <!-- 上传 S -->
  2.   <view class="img-list">
  3.     <!-- 上传列表 -->
  4.     <view class="upload-video">
  5.       <block wx:if="{{src != ''}}">
  6.         <video src="{{src}}" class="img-li"></video>
  7.         <image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deleteVideo"></image>
  8.       </block>
  9.     </view>
  10.     <block wx:for="{{imgList}}" wx:key="index">
  11.     
  12.     <!-- 视频 S -->
  13.     <view class="img-li" wx:if="{{src == ''}}" bindtap="chooseVideo">
  14.       <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
  15.     </view>
  16.     <!-- 视频 E -->
  17.   </view>
  18.   <!-- 上传 E -->

js 

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     src: "",        // 上传视频
  8.   },
  9.   /**
  10.    * 选择视频
  11.    */
  12.   chooseVideo: function() {
  13.     var _this = this;
  14.     wx.chooseVideo({
  15.       success: function(res) {
  16.         _this.setData({
  17.           src: res.tempFilePath,
  18.         })
  19.       }
  20.     })
  21.   },
  22.   /**
  23.    * 上传视频 目前后台限制最大100M, 以后如果视频太大可以选择视频的时候进行压缩
  24.    */
  25.   uploadvideo: function() {
  26.     var src = this.data.src;
  27.     wx.uploadFile({
  28.       url: '',
  29.       methid: 'POST',           // 可用可不用
  30.       filePath: src,
  31.       name: 'files',              // 服务器定义key字段名称
  32.       header: app.globalData.header,
  33.       success: function() {
  34.         console.log('视频上传成功')
  35.       },
  36.       fail: function() {
  37.         console.log('接口调用失败')
  38.       }
  39.     })
  40.   },
  41.  
  42. })

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

效果如下:

wxml

  1. <!-- 上传 S -->
  2.   <view class="img-list">
  3.     <!-- 上传列表 -->
  4.     <view class="upload-video">
  5.       <block wx:if="{{src != ''}}">
  6.         <video src="{{src}}" class="img-li"></video>
  7.         <image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deleteVideo"></image>
  8.       </block>
  9.     </view>
  10.     <block wx:for="{{imgList}}" wx:key="index">
  11.       <view class="img-li">
  12.         <view class="img-li" bindtap="previewImg">
  13.           <image class="uploading-icon" src="{{item}}"></image>
  14.         </view>
  15.         <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image>
  16.       </view>
  17.     </block>
  18.     <!-- 上传图片/视频 S -->
  19.     <view class="img-li" wx:if="{{imgList.length<=8}}" bindtap="actioncnt">
  20.       <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
  21.     </view>
  22.     <!-- 上传图片/视频 E -->
  23.   </view>
  24.   <!-- 上传 E -->

js 

  1. // pages/my/my-release-experience-report/index.js
  2. const app = getApp()
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     imgList: [],          // 上传列表
  10.     src: "",        // 上传视频
  11.   },
  12.   // 点击添加选择
  13.   chooseSource: function () {
  14.     var _this = this;
  15.     wx.showActionSheet({
  16.       itemList: ["拍照", "从相册中选择"],
  17.       itemColor: "#000000",
  18.       success: function (res) {
  19.         if (!res.cancel) {
  20.           if (res.tapIndex == 0) {
  21.             _this.imgWShow("camera")        //拍照
  22.           } else if (res.tapIndex == 1) {
  23.             _this.imgWShow("album")      //相册
  24.           }
  25.         }
  26.       }
  27.     })
  28.   },
  29.   // 点击调用手机相册/拍照
  30.   imgWShow: function (type) {
  31.     var _this = this;
  32.     let len = 0;
  33.     if (_this.data.imgList != null) {
  34.       len = _this.data.imgList.length
  35.     }   //获取当前已有的图片
  36.     wx.chooseImage({
  37.       count: 6 - len,     //最多还能上传的图片数,这里最多可以上传5张
  38.       sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
  39.       sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
  40.       success: function (res) {
  41.         wx.showToast({
  42.           title: '正在上传...',
  43.           icon: "loading",
  44.           mask: true,
  45.           duration: 1000
  46.         })
  47.         // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
  48.         var imgList = res.tempFilePaths
  49.         let tempFilePathsImg = _this.data.imgList
  50.         // 获取当前已上传的图片的数组
  51.         var tempFilePathsImgs = tempFilePathsImg.concat(imgList)
  52.         _this.setData({
  53.           imgList: tempFilePathsImgs
  54.         })
  55.       },
  56.       fail: function () {
  57.         wx.showToast({
  58.           title: '图片上传失败',
  59.           icon: 'none'
  60.         })
  61.         return;
  62.       }
  63.     })
  64.   },
  65.   // 预览图片
  66.   previewImg: function (e) {
  67.     let index = e.target.dataset.index;
  68.     let _this = this;
  69.     wx.previewImage({
  70.       current: _this.data.imgList[index],
  71.       urls: _this.data.imgList
  72.     })
  73.   },
  74.   /**
  75.    * 点击删除图片
  76.    */
  77.   deleteImg: function (e) {
  78.     var _this = this;
  79.     var imgList = _this.data.imgList;
  80.     var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
  81.     wx.showModal({
  82.       title: '提示',
  83.       content: '确认要删除该图片吗?',
  84.       success: function (res) {
  85.         if (res.confirm) {
  86.           console.log("点击确定了")
  87.           imgList.splice(index, 1);
  88.         } else if (res.cancel) {
  89.           console.log("点击取消了");
  90.           return false
  91.         }
  92.         _this.setData({
  93.           imgList
  94.         })
  95.       }
  96.     })
  97.   },
  98.   /**
  99.    * 点击删除视频
  100.    */
  101.   deleteVideo: function(e) {
  102.     var _this = this;
  103.     var src = _this.data.src;
  104.     var index = e.currentTarget.dataset.index;      //获取当前点击图片下标
  105.     wx.showModal({
  106.       title: '提示',
  107.       content: '确认要删除该视频吗?',
  108.       success: function (res) {
  109.         if (res.confirm) {
  110.           console.log("点击确定了")
  111.           var unsrc = '';
  112.           _this.setData({
  113.             src: unsrc
  114.           })
  115.         } else if (res.cancel) {
  116.           console.log("点击取消了");
  117.           return false
  118.         }
  119.       }
  120.     })
  121.   },
  122.   /**
  123.    * 图片  视频 选择框
  124.    */
  125.   actioncnt: function() {
  126.     var _this = this;
  127.     wx.showActionSheet({
  128.       itemList: ['图片', '视频'],
  129.       success: function(res) {
  130.         if(res.tapIndex == 0) {
  131.           _this.chooseSource()
  132.         }
  133.         if(res.tapIndex == 1) {
  134.           _this.chooseVideo()
  135.         }
  136.       },
  137.       fail: function(res) {
  138.         console.log(res.errMsg)
  139.       }
  140.     })
  141.   },
  142.   /**
  143.    * 选择视频
  144.    */
  145.   chooseVideo: function() {
  146.     var _this = this;
  147.     wx.chooseVideo({
  148.       success: function(res) {
  149.         _this.setData({
  150.           src: res.tempFilePath,
  151.         })
  152.       }
  153.     })
  154.   },
  155.   /**
  156.    * 上传视频 目前后台限制最大100M, 以后如果视频太大可以选择视频的时候进行压缩
  157.    */
  158.   uploadvideo: function() {
  159.     var src = this.data.src;
  160.     wx.uploadFile({
  161.       url: '',
  162.       methid: 'POST',           // 可用可不用
  163.       filePath: src,
  164.       name: 'files',              // 服务器定义key字段名称
  165.       header: app.globalData.header,
  166.       success: function() {
  167.         console.log('视频上传成功')
  168.       },
  169.       fail: function() {
  170.         console.log('接口调用失败')
  171.       }
  172.     })
  173.   },
  174. })

共用wxss

  1. /* 上传的图片 */
  2. .img-list {
  3.   display: flex;
  4.   flex-wrap: wrap;
  5. }
  6. .img-li {
  7.   width: 200rpx;
  8.   height: 200rpx;
  9.   margin-right: 39rpx;
  10.   margin-bottom: 23rpx;
  11. }
  12.  
  13. .img-li:first-child {
  14.   margin-right: 0;
  15. }
  16. .img-li image {
  17.   width: 100%;
  18.   height: 100%;
  19. }
  20. .icon-delete {
  21.   width: 28rpx !important;
  22.   height: 28rpx !important;
  23.   position: relative;
  24.   float: right;
  25.   margin-top: -229rpx;
  26.   margin-right: -15rpx;
  27.   z-index: 99;
  28. }
  29. .icon-deletes {
  30.   width: 28rpx !important;
  31.   height: 28rpx !important;
  32.   position: relative;
  33.   float: right;
  34.   margin-top: -9rpx;
  35.   margin-left: -10rpx;
  36.   margin-right: 29rpx;
  37.   z-index: 99;
  38. }
  39. .content-input-z {
  40.   display: flex;
  41.   align-items: center;
  42.   justify-content: space-between;
  43.   font-size: 24rpx;
  44.   color: #999999;
  45. }
  46.  
  47. .content-input-z {
  48.   margin-top: 31rpx;
  49. }
  50.  
  51. .content-input-z view image {
  52.   width: 32rpx;
  53.   height: 31rpx;
  54.   margin-right: 11rpx;
  55. }
  56. .content-input-z view {
  57.   display: flex;
  58.   align-items: center;
  59. }

学习讨论群

QQ群: 1102727334

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/325995?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。