小程序：个人中心

htmldev/wxMini/mixin/upload.js

@@ -20,7 +20,6 @@ module.exports = {
     })
   },
   async afterRead(event) {
-    const { form } = this.data
     const { file } = event.detail
     const { formkey, maxsize = '2' } = event.currentTarget.dataset
     const maxSize = maxsize * 1024 * 1024
@@ -33,14 +32,13 @@ module.exports = {
     wx.showToast({
       title: '上传中',
       icon: 'loading',
-      duration: 600 * 1000
+      duration: 200000
     })
 
     const result = _file.map(async item => {
       // 压缩图片时传入的路径
       item.filePath = item.url
       item.formkey = formkey
-      // item.url = ''
 
       const compressResult = item.size > maxSize ? await this.compressJs(item) : item
 
@@ -50,15 +48,17 @@ module.exports = {
     try {
       const res = await Promise.all(result)
 
-      this.setData({
-        ['form.' + formkey]: form[formkey].concat(...res)
-      })
+      if (this.uploadCallBack) {
+        this.uploadCallBack(res)
+      }
+
       wx.showToast({
         title: '上传成功',
         icon: 'success',
         duration: 2000
       })
     } catch (err) {
+      console.log(err)
       wx.showToast({
         title: '上传出错',
         icon: 'none',
@@ -74,5 +74,53 @@ module.exports = {
     this.setData({
       ['form.' + formkey]: this.data.form[formkey]
     })
+  },
+  async uploadImg(event) {
+    const { formkey, maxsize = '2' } = event.currentTarget.dataset
+    const maxSize = maxsize * 1024 * 1024
+
+    try {
+      const { errMsg, tempFiles } = await wx.chooseImage({
+        count: 1,
+        sizeType: ['original', 'compressed']
+      })
+
+      if (errMsg === 'chooseImage:ok') {
+        wx.showToast({
+          title: '上传中',
+          icon: 'loading',
+          duration: 200000
+        })
+        const result = tempFiles.map(async item => {
+          item.filePath = item.path
+          item.formkey = formkey
+
+          const compressResult = item.size > maxSize ? await this.compressJs(item) : item
+          return handleUpload(compressResult)
+        })
+
+        try {
+          const res = await Promise.all(result)
+
+          if (this.uploadCallBack) {
+            this.uploadCallBack(res)
+          }
+
+          wx.showToast({
+            title: '图片上传成功',
+            icon: 'success',
+            duration: 2000
+          })
+        } catch (err) {
+          console.log(err)
+          wx.showToast({
+            title: '图片上传出错',
+            icon: 'error',
+            duration: 2000
+          })
+        }
+      }
+    } catch (e) {
+    }
   }
 }

htmldev/wxMini/pages/mine/mine.js

@@ -1,9 +1,25 @@
+const uploadJS = require('../../mixin/upload.js')
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    form: {
+      portrait: [
+        {
+          // 'size': 334651,
+          // 'type': 'image',
+          'url': 'https://tuotuoyinfu-oss.oss-cn-beijing.aliyuncs.com/images/user/bashi6321a03279686.png',
+          // 'thumb': 'http://tmp/QX9dnkXe4ReH079e47eade53d725108d13bee07b6b05.png',
+          // 'filePath': 'http://tmp/QX9dnkXe4ReH079e47eade53d725108d13bee07b6b05.png',
+          'formkey': 'portrait'
+        }
+      ],
+      nickname: '',
+      account: ''
+    },
     booLogout: false,
     booLock: false
   },
@@ -41,6 +57,19 @@ Page({
    */
   onUnload() {
 
+  },
+  ...uploadJS,
+  uploadCallBack(arr) {
+    // const temp = res.map(item => {
+    //   return {
+    //     'url': item.url,
+    //     'formkey': item.formkey
+    //   }
+    // })
+    //
+    // this.setData({
+    //   [`form.${formkey}`]: this.data.form[formkey].concat(...temp)
+    // })
   },
   jump(e) {
     const { page } = e.currentTarget.dataset

htmldev/wxMini/pages/mine/mine.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
+    "van-uploader": "@vant/weapp/uploader/index",
     "van-popup": "@vant/weapp/popup/index"
   }
 }

htmldev/wxMini/pages/mine/mine.scss

@@ -11,13 +11,6 @@
   height: 169rpx;
   border-radius: 50%;
   overflow: hidden;
-
-  image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: pink;
-  }
 }
 
 .nickname-wrap {
@@ -49,6 +42,7 @@
 
 .account {
   margin-top: 11rpx;
+  height: 38rpx;
   line-height: 38rpx;
   font-size: 24rpx;
   color: rgba(153, 153, 153, 1);
@@ -67,7 +61,7 @@
   padding: 37rpx 34rpx 29rpx;
   margin-bottom: 20rpx;
   border-radius: 20rpx;
-  background: green;
+  //background: green;
 
   .describe {
     line-height: 48rpx;
@@ -153,3 +147,8 @@ button.logout[type="primary"] {
   font-weight: 500;
   color: rgba(255, 255, 255, 1);
 }
+
+.van-uploader__preview,
+.van-uploader__upload {
+  margin: 0 !important;
+}

htmldev/wxMini/pages/mine/mine.wxml

@@ -1,6 +1,19 @@
 <view class="wrapper">
-  <view class="portrait">
-    <image src=""></image>
+  <view
+    class="portrait">
+    <view class="van-uploader-wrap">
+      <van-uploader
+        file-list="{{ form.portrait }}"
+        max-count="1"
+        accept="image"
+        deletable="{{false}}"
+        preview-size="169rpx"
+        data-formkey="portrait"
+        preview-full-image="{{false}}"
+        bind:click-preview="uploadImg"
+        bind:after-read="afterRead"
+        bind:delete="delete"/>
+    </view>
   </view>
   <view class="nickname-wrap">
     <block wx:if="{{true}}">

htmldev/wxMini/project.private.config.json

@@ -3,7 +3,19 @@
     "urlCheck": false,
     "compileHotReLoad": true
   },
-  "condition": {},
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "1111",
+          "pathName": "pages/businessGoodsEdit/businessGoodsEdit",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  },
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "libVersion": "2.13.2",
   "projectname": "%E5%A7%8B%E5%AE%81%E5%86%9C%E4%B8%9A"