微信小程序图片上传，前端代码

小程序图片上传

// pages/order_service/order_service.js
var api = require("../../utils/api.js");
const r = require("../../utils/api.js");

const app = getApp();//新建页面时 默认引入
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: 0,
    details: [],
    servicetype: true,//配送方式，默认快递
    type: 1,
    islogin: !0,
    shopId: 0,
    latitude: 0,
    longitude: 0,
    shopData: {},
    remarks: '',
    type:1,
    imgList: [],
    imgUrl: [],
  },
  onLoad: function (options) {

    app.page.onLoad(this, options);
    var that = this
    var id = that.data.id;
    var str = JSON.stringify(options);
    var isid = str.indexOf('id');
    if (isid != -1) {
      id = decodeURIComponent(options.id);
      that.setData({
        id: id
      })
    }
    showView: (options.showView == "true" ? true : false)
    menuEwm: (options.menuEwm == "true" ? true : false)
    var access_token = wx.getStorageSync("access_token");
    if (access_token) {
      that.setData({
        islogin: !1,
      })
    }
  },
  onShow: function (e) {
    var access_token = wx.getStorageSync("access_token");
    if (!access_token) {
      app.page.setUserInfoShow();
    }
    if (access_token) {
      this.setData({
        islogin: !1,
      })
    }
    this.loadsData();
  },



  loadsData: function () {
    var that = this;
    app.request({
      url: api.member.orderdetails,
      data: { id: that.data.id },
      method: 'GET',
      success: function (res) {
        console.log('信息:', res)
        if (res.status == 1) {
          that.setData({
            details: res.data,
            shopId: res.data.shopId,
          });

          wx.getLocation({
            success: res => {
              console.log("获取信息:", res);
              that.setData({
                latitude: res.latitude,
                longitude: res.longitude,
              })
              that.loadsShopOne();
            },
          })

        } else if (res.status == -1) {
          wx.showModal({
            title: "提示",
            content: res.msg,
            showCancel: !1
          });
        }
      }
    });
  },


  // 获取门店
  loadsShopOne: function () {
    var that = this
    var url = api.default.nearestShop;

    if (that.data.shopId > 0) {
      console.log(that.data.shopId);

      url = api.default.shopDetail
    }
    app.request({
      url: url,
      method: 'POST',
      data: {
        latitude: that.data.latitude,
        longitude: that.data.longitude,
        shopId: that.data.shopId,
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if (res.status == 1) {
          that.setData({
            shopData: res.data,
            shopId: res.data.id
          });
        }
      },
      error: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 2000,
        });
      },

    });
  },


  //输入说明
  inputRemarks: function (e) {
    var then = this;
    var remarks = then.data.remarks
    remarks = e.detail.value
    this.setData({
      remarks: remarks
    })
  },

  uploadimg: function (e) {
    console.log(1234);

    var that = this;

    var imgs = that.data.imgList;
    if (imgs.length >= 12) {
      that.setData({
        lenMore: 0
      });
      return false;
    }
    wx.chooseImage({
      // count: 1, // 默认9
      sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        // console.log(tempFilePaths + '----');
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 12) {
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
          }
        }
        if (imgs.length >= 12) {
          that.setData({
            lenMore: 0
          });

        }
        that.setData({
          imgList: imgs
        });
      }
    });
  },
  in_array: function (url) {
    var then = this;
    var imgUrl = then.data.imgUrl;

    for (var i = 0; i < imgUrl.length; i++) {
      if (url == imgUrl[i]) {
        return true;
      }
    }
    return false;
  },

  bindClose: function (e) {
    var imgs = this.data.imgList;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgList: imgs
    });
  },



  //切换配送方式
  bindservicetypeone: function (e) {
    // var servicetype = e.currentTarget.dataset.servicetype;
    // console.log(servicetype);
    this.setData({
      servicetype: true,
      type: 1,
    })
  },
  bindservicetypetwo: function (e) {
    // var servicetype = e.currentTarget.dataset.servicetype;
    // console.log(servicetype);
    this.setData({
      servicetype: false,
      type: 2,
    })
  },

  //提交申请
  bindServiceSubmit: function (e) {
    var that = this;
    if (!that.data.remarks) {
      wx.showToast({
        icon: 'none',
        title: '请输入退款原因'
      });
      return;
    }
    if (that.data.servicetype) {
      var type = 1;
    } else {
      var type = 2;

      if (!that.data.shopId) {
        console.log(that.data.shopId);
        wx.showToast({
          icon: 'none',
          title: '请选择换货门店'
        });
        return;
      }
    }

    that.setData({
      type:type,
    })
    wx.showLoading({
      title: "正在提交数据",
      mask: !0
    })

    that.imguploadFile(that.data.imgList, 0)
  },


  subfrom: function () {

    var then = this
    var imgUrl = then.data.imgUrl

    imgUrl = JSON.stringify(imgUrl)
  
    app.request({
      url: api.orders.refundOrders,
      data: {
        id: then.data.id,
        type: then.data.type,
        shopId: then.data.shopId,
        imgUrl:imgUrl,
      },
      method: 'POST',
      success: function (res) {
        console.log('信息:', res)
        if (res.status == 1) {
          wx.showToast({
            title: '售后订单提交成功', // 标题
            icon: 'success',  // 图标类型，默认success
            duration: 1500,  // 提示窗停留时间，默认1500ms
            success: function () {
              wx.reLaunch({
                url: '/pages/order_list/order_list'
              })
            }
          })

        } else if (res.status == -1) {
          wx.showModal({
            title: "提示",
            content: res.msg,
            showCancel: !1
          });
        } else {

          wx.showToast({
            icon: 'none',
            title: res.msg,
            duration: 2000

          });
        }
      },

      error: function (e) {
        wx.showToast({
          title: '网络异常！',
          image: '/images/error.png',
          duration: 2000,
        });
      },

    });


  },


  imguploadFile: function (list, num) {
    var then = this
    var e = wx.getStorageSync("access_token");
    if (!e || e == '') {
      app.login();
    }
    var file = list[num];

    if (then.in_array(file)) {

      if (num < (list.length - 1)) {
        num++
        then.imguploadFile(list, num);

      } else {
        then.subfrom();
      }

    } else {
      wx.uploadFile({
        url: api.orders.uploadfile,
        filePath: file,
        name: 'file',
        formData: {
          access_token: e
        },
        success: function (res) {
          var data = JSON.parse(res.data)
          var imgUrl = then.data.imgUrl

          if (data.status == 1) {
            imgUrl.push(data.data.attachment)
            then.setData({
              imgUrl: imgUrl
            });
          }

        },
        fail: function (e) {

        },
        complete: function (e) {
          if (num < (list.length - 1)) {
            num++
            then.imguploadFile(list, num);

          } else {
            then.subfrom();
          }

        }
      })
    }
  },






})

<!--pages/order_service/order_service.wxml-->
<view class="container">

  <view class="order_pro" wx:for="{{details.goodslist}}" >
    <image src="{{item.goods_image}}" class="img"></image>
    <view class="con">
      <view class="name">{{item.goods_name}}</view>
      <view class="specs">规格：{{item.attr_name}}</view>
      <view class="price">
        <view class="num">×{{item.goods_num}}</view>
        <view>￥{{item.goods_price}}</view>
      </view>
    </view>
  </view>
  <view class="service_tab">
    <view class="con {{servicetype ? 'active' : ''}}" bindtap="bindservicetypeone">
      <text>退货退款</text>
    </view>
    <view class="con {{servicetype ? '' : 'active'}}" bindtap="bindservicetypetwo">
      <text>换货</text>
    </view>
  </view>
  <!-- 退货退款--s -->
  <view wx:if="{{servicetype}}" class="service_more">
    <view class="service_con">
      <view class="title">退款原因</view>
      <view class="con">
        <textarea class="textarea" bindinput="inputRemarks"  placeholder="请输入退款原因"></textarea>
      </view>
    </view>
    <view class="service_con">
      <view class="title">退款金额</view>
      <view class="con">
        <text>￥{{details.payGoods}}</text>
      </view>
    </view>
    <view class="service_con service_imgs">
      <view class="title">上传凭证</view>
      <view class="con">
        <view class="con_imgs" wx:for="{{imgList}}" >
          <view class="close" bindtap="bindClose">
            <image src="/images/icon_close_red.png"></image>
          </view>
          <image src="{{item}}" class="img"></image>
        </view>
        <view class="con_imgs" bindtap="uploadimg">
          <image src="/images/img_upload.png" class="img"></image>
        </view>
      </view>
    </view>
  </view>
  <!-- 退货退款--e -->

  <!-- 换货--s -->
  <view wx:else>
    <view class="service_more">
      <view class="service_con">
        <view class="title">换货说明</view>
        <view class="con">
          <textarea class="textarea" bindinput="inputRemarks"  placeholder="请输入换货说明"></textarea>
        </view>
      </view>
      <view class="service_con service_imgs">
        <view class="title">上传凭证</view>
        <view class="con">
          <view class="con_imgs"  wx:for="{{imgList}}" >
            <view class="close"  data-index="{{index}}" bindtap="bindClose">
              <image src="/images/icon_close_red.png"></image>
            </view>
            <image src="{{item}}" class="img"></image>
          </view>
          <view class="con_imgs" bindtap="uploadimg">
            <image src="/images/img_upload.png" class="img"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="service_address">
      <view class="title">换货地址</view>
      <navigator url="/pages/store_list/store_list?type=return" hover-class="none" class="con">
        <view class="v_con">
          <view class="v1">{{shopData.title}}{{shopData.mobile}}</view>
          <view class="v2">{{shopData.address}}</view>
        </view>
        <view class="right">
          <image src="/images/icon_right.png"></image>
        </view>
      </navigator>
    </view>
  </view>
  <!-- 换货--e -->
  <view class="order_btns">
    <view class="btn" bindtap="bindServiceSubmit">提交申请</view>
  </view>
</view>

/* pages/order_service/order_service.wxss */
.order_pro{display: flex;padding: 30rpx 30rpx 20rpx;background: #fff;margin-top: 10rpx;}
.order_pro .img{ 150rpx;height: 150rpx;}
.order_pro .con{padding-left: 20rpx;flex: 1;}
.order_pro .con .name{font-size: 30rpx;color: #222;}
.order_pro .con .specs{font-size: 24rpx;color: #888;}
.order_pro .con .price{font-size: 30rpx;color: #666;display: flex;justify-content: space-between}
.order_pro .con .price .num{font-size: 24rpx;color: #6dc04a;}
.service_tab{display: flex;justify-content: space-evenly;border-bottom:1px solid #f3f3f3;align-items: center;background: #fff;padding: 0 30rpx;padding-top: 20rpx;}
.service_tab .con{font-size: 28rpx;color: #666;height: 90rpx;line-height: 90rpx;position: relative;}
.service_tab .con.active{font-size: 32rpx;color: #000;font-weight: bold;}
.service_tab .con:after{content: ''; position: absolute; 100%;bottom: 0;left:0; height: 4rpx;}
.service_tab .con.active:after{background: #6dc04a;}

.service_more{background: #fff;padding: 20rpx 30rpx 0;}
.service_con{display: flex;padding: 20rpx 0;}
.service_con .title{font-size:28rpx;color: #000;font-weight: bold; }
.service_con .con{flex: 1;margin-left: 40rpx;}
.service_con .con .textarea{ 100%;height: 100rpx;font-size: 28rpx;color: #666;}
.service_con .con text{color: #6dc04a;font-size: 34rpx;}
.service_imgs{display: block;}
.service_imgs .con{display: flex;padding: 15rpx 0;margin: 0;}
.service_imgs .con .con_imgs{padding-right: 15rpx;padding-top: 15rpx; position: relative;margin-right: 15rpx;}
.service_imgs .con .con_imgs .img{ 160rpx;height: 160rpx;}
.service_imgs .con .con_imgs .close{position: absolute;right: 0;top: 0;}
.service_imgs .con .con_imgs .close image{ 36rpx;height: 36rpx;}

.service_address{margin-top: 10rpx;background: #fff;padding: 30rpx;}
.service_address .title{line-height: 1.5;font-size: 30rpx;font-weight: bold;}
.service_address .con{display: flex;justify-content: space-between; align-items: center;margin-top: 10rpx;}
.service_address .v_con{display: flex;justify-content: space-between;flex-direction: column; font-size: 26rpx;color: #666;line-height: 1.5}
.service_address .con image{ 26rpx;height: 26rpx;transform: rotate(270deg);}

.order_btns{padding: 50rpx 30rpx;height: 92rpx;}
.order_btns .btn{float: right;height: 92rpx;line-height: 92rpx;border-radius: 90rpx; 266rpx;background: #6dc04a;color: #fff;text-align: center;box-shadow:0 0 10rpx 10rpx rgba(109,192,74,0.2);font-size: 34rpx;}