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

本是古典何须时尚 2023-02-17 02:47 18阅读 0赞

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

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

## 上传图片功能 ##

效果如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

### 单图上传  ###

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 ###

<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>
        
        <view class="img-li" wx:if="{
       {imgList.length<=8}}" bindtap="chooseSource">
          <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
        </view>
        
      </view>

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

## 上传视频功能 ##

效果如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

### wxml ###

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

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

效果如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

### wxml ###

<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>
        
        <view class="img-li" wx:if="{
       {imgList.length<=8}}" bindtap="actioncnt">
          <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
        </view>
        
      </view>

### 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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611130729697.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200611130749999.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200611130819464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70