微信小程序如何實現上傳圖片小功能

本篇內容介紹了“微信小程序如何實現上傳圖片小功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

用到的api
wx.chooseMedia(); 用于拍攝或從手機相冊中選擇圖片或視頻

功能：點擊上傳圖片，可多選，或者拍照上傳；點擊圖片放大查看；長按圖片刪除

效果圖

json里面引用weui的組件uploader

{
  "navigationBarTitleText": "評價工單",
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}

wxml

<view class="weui-uploader">
     <view class="img-v weui-uploader__bd">
        <view class='pic' wx:for="{{technicianAssessPicture}}" wx:for-item="item" wx:key="*this">
            <image class='weui-uploader__img ' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindlongpress="deleteTechnician" bindtap="previewTechnician">
            </image>
        </view>
        <view class="weui-uploader__input-box pic" bindtap="technicianImg"> </view>
     </view>
</view>

js

data:(){
    technicianAssessPicture: [], // 技師圖片
}
// 上傳技師圖片
  technicianImg: function (e) {
    var that = this;
    var technicianAssessPicture = this.data.technicianAssessPicture;
    if (technicianAssessPicture.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseMedia({
      count: 9,   // 默認9
      mediaType: ['image','video'],   // 文件類型
      // image    只能拍攝圖片或從相冊選擇圖片    
      // video    只能拍攝視頻或從相冊選擇視頻
      
      // sizeType: ['original', 'compressed'],  //所選的圖片的尺寸  original原圖，compressed壓縮圖
      // 僅對 mediaType 為 image 時有效，是否壓縮所選文件
      
      sourceType: ['album', 'camera'],  //圖片和視頻選擇的來源
      maxDuration: 30,   //  拍攝視頻最長拍攝時間，單位秒。時間范圍為 3s 至 60s 之間。不限制相冊。
      camera: 'back',    // 僅在 sourceType 為 camera 時生效，使用前置或后置攝像頭
      //  back    使用后置攝像頭;front    使用前置攝像頭
      success: function (res) {
        var tempFilePaths = res.tempFiles;
        var technicianAssessPicture = that.data.technicianAssessPicture;
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (technicianAssessPicture.length >= 9) {
            that.setData({
              technicianAssessPicture: technicianAssessPicture
            });
            return false;
          } else {
            const tempFilePaths1 = tempFilePaths.map(v=>v.tempFilePath)
            //   tempFilePaths數據是json數組，我們需要的是普通數組需要處理一下
            technicianAssessPicture.push(tempFilePaths1[i]);
          }
        }
        that.setData({
          technicianAssessPicture: technicianAssessPicture
        });
        console.log(that.data.technicianAssessPicture, 'hhhhhhhhhhhhhhhhhhhhh');
      }
    });
  },

處理后打印出來的數據

預覽，刪除

// 預覽圖片
previewTechnician: function (e) {
    //獲取當前圖片的下標
    var index = e.currentTarget.dataset.index;
    //所有圖片
    var technicianAssessPicture = this.data.technicianAssessPicture;
    wx.previewImage({
      //當前顯示圖片
      current: technicianAssessPicture[index],
      //所有圖片
      urls: technicianAssessPicture
    })
  },

  // 長按刪除
  deleteTechnician: function (e) {
    var that = this;
    var technicianAssessPicture = that.data.technicianAssessPicture;
    var index = e.currentTarget.dataset.index;    //   獲取當前長按圖片下標
    wx.showModal({
      // cancelColor: 'cancelColor',
      title: '提示',
      content: '確定要刪除此圖片嗎？',
      success: function (res) {
        if (res.confirm) {
          console.log('確定');
          technicianAssessPicture.splice(index, 1);
        } else if (res.cancel) {
          console.log('取消');
          return false;
        }
        that.setData({
          technicianAssessPicture
        })
      }
    })
},

“微信小程序如何實現上傳圖片小功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！