上传图片

src/component/uploadImg/uploadImg.js

+// component/uploadImg/uploadImg.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    pics:[]
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //点击上传图片
+    uploadImg(){
+      console.log('1111')
+      this.chooseImg()
+    },
+
+    //选取图片
+    chooseImg(){
+      let that = this;
+      let pics = this.data.pics;
+      wx.chooseImage({
+        count: 5 - pics.length, // 最多可以选择的图片5张，
+        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
+        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
+        success: function (res) {
+          var imgsrc = res.tempFilePaths;
+          pics = pics.concat(imgsrc);
+          that.setData({
+            pics: pics
+          });
+          console.log(that.data.pics)
+          // that.moreImgUpload({
+          //   url: 'https://........',//这里是你图片上传的接口
+          //   path: that.data.pics//这里是选取的图片的地址数组        
+          // });
+        },
+        fail: function () {
+          // fail      
+        },
+        complete: function () {
+          // complete      
+        }
+      })
+    },
+
+    //多张图片上传
+    moreImgUpload(data){
+      var that = this,
+        i = data.i ? data.i : 0,//当前上传的哪张图片
+        success = data.success ? data.success : 0,//上传成功的个数
+        fail = data.fail ? data.fail : 0;//上传失败的个数
+      wx.uploadFile({
+        url: data.url,
+        filePath: data.path[i],
+        name: 'file',//这里根据自己的实际情况改
+        formData: null,//这里是上传图片时一起上传的数据
+        success: (resp) => {
+          success++;//图片上传成功，图片上传成功的变量+1
+          console.log(resp)
+          console.log(i);
+          //这里可能有BUG，失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时，这里的success才+1 
+        },
+        fail: (res) => {
+          fail++;//图片上传失败，图片上传失败的变量+1
+          console.log('fail:' + i + "fail:" + fail);
+        },
+        complete: () => {
+          console.log(i);
+          i++;//这个图片执行完上传后，开始上传下一张            
+          if (i == data.path.length) {   //当图片传完时，停止调用          
+            console.log('执行完毕');
+            console.log('成功：' + success + " 失败：" + fail);
+          } else {//若图片还没有传完，则继续调用函数                
+            console.log(i);
+            data.i = i;
+            data.success = success;
+            data.fail = fail;
+            that.moreImgUpload(data);
+          }
+        }
+      })
+    }
+  }
+})

src/component/uploadImg/uploadImg.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/uploadImg/uploadImg.wxml

+<!--component/uploadImg/uploadImg.wxml-->
+<view class="page-upload-img">
+  <view class="upload-img-wrap" wx:for="{{pics}}" wx:key="{{index}}">
+    <image class="upload-img" src="{{item}}"></image>
+  </view>
+  <view class="upload-wrap" bindtap="uploadImg" wx:if="{{pics.length < 5}}">
+    <view class="upload-text">+图片</view>
+  </view>
+</view>

src/component/uploadImg/uploadImg.wxss

+/* component/uploadImg/uploadImg.wxss */
+.page-upload-img{
+  display: flex;
+  flex-wrap: wrap;
+}
+.upload-wrap{
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 5rpx;
+  border: 1px solid rgba(216, 216, 216, 1);
+  line-height: 160rpx;
+  text-align: center;
+}
+.upload-text{
+  color: #aaaaaa;
+}
+.upload-img{
+  width: 160rpx;
+  height: 160rpx;
+  border: 1px solid rgba(216, 216, 216, 1);
+}
+.upload-img-wrap{
+  margin-right: 20rpx;
+}
\ No newline at end of file

src/pages/refund/refund.json

 {
   "navigationBarTitleText": "退款/售后",
-  "usingComponents": {}
+  "usingComponents": {
+    "upload-img": "/component/uploadImg/uploadImg"
+  }
 }
\ No newline at end of file

src/pages/refund/refund.wxml

@@ -55,7 +55,7 @@
     <view class="form">
       <view class="form-label">上传凭证 <text class="img-number">最多5张</text></view>
       <view class="form-input">
-        <input type="textarea"></input>
+        <upload-img />
       </view>
     </view>
   </view>
@@ -63,3 +63,4 @@
     <button class="btn btn-primary btn-lg">提交申请</button>
   </view>
 </view>
+

src/pages/refund/refund.wxss

 /* pages/refund/refund.wxss */
 page{
   background-color: #f9f9f9;
+  padding-bottom: 88rpx;
 }
 .select-pro{
   padding: 20rpx 40rpx;
@@ -141,4 +142,10 @@ page{
   border-radius: 5rpx;
   border: 1px solid rgba(170, 170, 170, 1);
   padding: 21rpx 29rpx;
+}
+.submit{
+  width: 750rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
 }
\ No newline at end of file