微信小程序實現上傳視頻 / 上傳圖片功能以及整合上傳視頻 / 上傳圖片功能(超詳細)

微信小程序有自己封裝好的我們直接拿過來用就可以了

接下來我們看看如何實現的吧

上傳圖片功能

效果如下:

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