mpvue圖片上傳

mpvue小程序項目中的圖片上傳

我的csdn博客地址：https://blog.csdn.net/zmkyf1993

一般我是優先更新csdn內容，然后在拷過來的。

效果圖

通過mpvue文檔得知他使用的是小程序原生api中的圖片選擇（wx.chooseImage）和文件上傳（wx.uploadFile），因此我們直接根據小程序的文檔來使用就可以了。

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

圖片選擇

我將備注寫在代碼塊里，比較好說

 

chooseImage(e) {
      let i = 0;                    // 多圖上傳時使用到的index
      let that = this;
      let max = that.maxImg;        //最大選擇數
      let upLength;                        //圖片數組長度
      let imgFilePaths;                //圖片的本地臨時文件路徑列表
      wx.chooseImage({
        count: max || 1,           //一次最多可以選擇的圖片張數
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
        success: function (res) {
          let len = that.files.concat(res.tempFilePaths);
          imgFilePaths = res.tempFilePaths;
          upLength = imgFilePaths.length;
          if(len.length > max){
            that.$mptoast('圖片最多只能選擇' + max);
            return false;
          }
          /**
           * 上傳完成后把文件上傳到服務器
           */
          wx.showLoading({
            title: '上傳中...',
          })
          that.upLoad(imgFilePaths,i,upLength);            //上傳操作
        },
        fail: function () {
          console.log('fail');
        },
        complete: function () {
          console.log('commplete');
        }
      })
    }

上傳操作

微信的上傳api

https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

他這文檔有個地方沒說明，那就是一次只能上傳一個文件，當前一個文件上傳成功的時候才能接着下一個上傳。所以我們多圖上傳的話需要分次上傳，然后在上傳結束后再次調用上傳方法。
因此我在接口調用結束的回調函數，complete中判斷是否全部上傳結束，全部結束就取消loading，還未結束就再次調用上傳方法上傳下一個文件。

upLoad(imgPath,i,upLength){
      let that = this;
      //上傳文件
      wx.uploadFile({
        url: '上傳接口',
        filePath: imgPath[i],
        name: 'img0',
        header: {
          "Content-Type": "multipart/form-data"
        },
        success: function (res) {
          console.log('上傳成功' + i);
          // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
          that.files = that.files.concat(imgPath[i]);        //合並圖片顯示數組
          let imgData = JSON.parse(res.data);
          that.upImg.push(imgData.data);
          console.log(that.upImg);
        },
        fail: function (res) {
          console.log(res);
          wx.hideLoading();
          wx.showModal({
            title: '錯誤提示',
            content: '上傳圖片失敗',
            showCancel: false,
            success: function (res) { }
          })
        },
        complete: function(){
          i++;
          if(i == upLength){
            wx.hideLoading();    //上傳結束，隱藏loading
          }else{
            that.upLoad(imgPath,i,upLength);
          }
        }
      });
    },

圖片預覽功能

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

使用效果，點擊圖片可以選擇預覽或者刪除

 

previewImage(e,index) {
      let that = this;
      wx.showActionSheet({
        itemList:["預覽","刪除"],
        success: function(res) {
          if(res.tapIndex === 0){
              //選擇預覽
            wx.previewImage({
              current: e.currentTarget.id, // 當前顯示圖片的http鏈接
              urls: that.files // 需要預覽的圖片http鏈接列表
            })
          } else {
              //選擇刪除
            that.files.splice(index,1);                //刪除本地圖片地址數組中位置內容
            that.upImg.splice(index,1);            //刪除提交給后台的圖片數組中的位置內容
          }
        },
      })
    },

流程就是這樣，最后補上頁面代碼
mptoast是一個mpvue的toast提示插件

<template>
  <section id="pickUp">
    <div class="upload">
      <p class="pick-title">取件照片</p>
      <div class="weui-uploader__bd">
        <div class="weui-uploader__files" id="uploaderFiles">
          <block v-for="(item,index) in files" :key="index">
            <div class="weui-uploader__file" @click="previewImage($event,index)" :id="item">
              <image class="weui-uploader__img" :src="item" mode="aspectFit" />
            </div>
          </block>
        </div>
        <div class="weui-uploader__input-box">
          <div class="weui-uploader__input" @click="chooseImage"></div>
        </div>
      </div>
    </div>
    <p class="pay-num">下單數量(箱)：{{num}}</p>
    <div class="add-num">
      <add-content :title="addTitle" v-model="getOrder.recieve"></add-content>
    </div>
    <div class="remark">
      <textarea placeholder="填寫備注" placeholder-style="color:#999999;font-size:30rpx;" class="remark-text" v-model="getOrder.remark"/>
    </div>
    <button
      type="primary"
      class="complete-btn"
      @click="completeBtn"
      >
      完成取件
    </button>
    <mptoast />
  </section>
</template>