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>