微信小程序圖片上傳功能怎么實現(xiàn)

這篇文章主要介紹“微信小程序圖片上傳功能怎么實現(xiàn)”，在日常操作中，相信很多人在微信小程序圖片上傳功能怎么實現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序圖片上傳功能怎么實現(xiàn)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

首先是靜態(tài)布局和樣式部分

.wxml代碼部分

<view class='load-img'>
    <view class='load-box'>
      <view class='img-item' wx:for="{{fileList}}" wx:key="index" >
        <image src="{{item.path}}" data-src="{{item}}" mode="aspectFill" data-list="{{fileList}}" bindtap=""></image>
        <icon class='icon' type="clear" size="20" color='#EF4444' catchtap='_onDelTab' data-idx="{{index}}" wx:if="{{!prevent}}"/>
      </view>
      <image class='img-add' bindtap='_addImg' wx:if="{{!prevent}}"></image>
    </view>
  </view>

.wxss代碼部分

/* 上傳圖片 */
.load-name {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
  }
  .load-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .img-item, .img-add {
    position: relative;
    width: 140rpx;
    height: 140rpx;
    margin: 20rpx;
  }
  .img-add {
    border: 1px solid #ccc;
  }
  .img-add:after{
    width: 1rpx;
    height: 50rpx;
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #ccc;
  }
  .img-add:before{
    position: absolute;
    top: 50%;
    right: 31%;
    width: 50rpx;
    height: 1rpx;
    content: " ";
    display: inline-block;
    background-color: #ccc;  
  }
  
  .img-item {
    margin-right: 20rpx;
  }
  .img-item image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
  .icon {
    position: absolute;
    top: 0;
    right: 0;
  }

以上這些基本代碼就可以完成圖片上傳，顯示，刪除等樣式布局

下面是js的部分，我已詳細(xì)備注～～～

先來看下完整的代碼

/**
 * 小程序圖片上傳
 * 組件接受參數(shù)
 * fileList  圖片數(shù)組
 * prevent 控制是否可新增
 * 方法
 * bindimageChange 選擇圖片后觸發(fā)
 * bindimageDel  刪除圖片后觸發(fā)
 * 
 */
const app = getApp();
Component({
  properties: {
    fileList: {
      type: Array
    },
    prevent: {
      type: Boolean,
      value: false
    }
  },
  data: {
    fileList: []
  },
  ready() {},
  methods: {
    // 點擊加號進(jìn)入手機(jī)相冊，并進(jìn)行圖片選擇
    _addImg() {
      let _this = this;
      // 此方法為微信小程序自帶api 詳情訪問https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
      wx.chooseImage({
        count: 5,
        success(res) {
          //此處會返回圖片暫存路徑和文件大小
          const data = res.tempFiles;
          _this.setFile(data)
        }
      })
    },
    setFile (data) {
      // 將wx.chooseImage返回的數(shù)據(jù)進(jìn)行擴(kuò)展
      data.map((item, index) => {
        // 通過路徑截取文件后綴名
        const fileFormat = item.path.substring(item.path.lastIndexOf(".") + 1, item.path.length);
        // wx.getFileSystemManager()小程序文件管理器api，可以將通過文件路徑將其轉(zhuǎn)換成64編碼
        const fileManager = wx.getFileSystemManager();
        const base64 = fileManager.readFileSync(item.path, 'base64');
        item.fileContent = base64;
        item.fileSize = item.size;
        // 通過時間獲取隨機(jī)13位隨機(jī)數(shù)并且拼接文件后綴進(jìn)行文件命名
        item.fileName = this.getFileName(13) + '.' + fileFormat;
        // 此處操作是用來進(jìn)行選中圖片顯示的，只有這樣拼接才能顯示base64編碼的路徑
        item.path = `data:image/${fileFormat};base64,${base64}`;;
      })
      this.setData({ 
        fileList: this.data.fileList.concat(data)
      });
      // 此處操作是用來將獲取到的文件數(shù)據(jù)傳遞給父組件進(jìn)行文件上傳
      this.triggerEvent('imageChange', this.data.fileList)
    },
    // 隨機(jī)生成文件名
    getFileName (m) {
      m = m > 13 ? 13 : m;
      var num = new Date().getTime();
      return num.toString().substring(13 - m);
    },
    點擊進(jìn)行圖片刪除
    _onDelTab(e) {
      // 獲取圖片索引
      let idx = e.currentTarget.dataset.idx;
      let delFile = this.data.fileList[idx];
      console.log(delFile);
      this.data.fileList.splice(idx, 1);
      this.setData({
        fileList: this.data.fileList
      })
      this.triggerEvent('imageDel', delFile);
    }
})

代碼里對代碼的備注已經(jīng)很明確了，大家仔細(xì)扒一下，根據(jù)的自己的項目進(jìn)行相應(yīng)的調(diào)整，基本上都是沒問題的，~~不要直接直接粘貼不復(fù)置，我是直接在我的項目中直接拿過來的代碼，直接粘貼復(fù)制肯定是不行的?。?！~~

大家需要注意的是這里

通常在真機(jī)上點擊選中圖片后wx.chooseImage方法中返回的文件路徑是wxfile:開頭的路徑，這樣的路徑想直接轉(zhuǎn)成base64，上面的方式是可以實現(xiàn)的，我也是查了很多資料才找到的解決辦法。

再一個需要注意的是image src屬性想顯示base64格式的圖片要進(jìn)行字符串拼接才可以正常顯示如下圖

到此，關(guān)于“微信小程序圖片上傳功能怎么實現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>