打卡上传照片

src/pages/clock/index.vue

@@ -12,6 +12,40 @@
         </view>
 				<view class="tle">我的位置</view>
 				<view class="curAdres">{{curAdres}}</view>
+
+
+        <!-- 图片上传 -->
+        <view class="tle" style="margin-top: 40rpx;">工作地证明（必填，1-3张）</view>
+        <view class="upload_nav">
+          <view
+              class="upload_item"
+              v-for="(item, index) in imgList"
+              :key="index"
+          >
+            <image :src="item" class="upload_img" mode="aspectFill"></image>
+            <view class="del" @click="removeImg(index)">×</view>
+          </view>
+
+          <view
+              class="upload_add"
+              v-if="imgList.length < maxImg"
+              @click="chooseImage"
+          >
+            <view class="plus">+</view>
+            <view class="txt">拍照 / 相册</view>
+          </view>
+        </view>
+
+        <view class="tle" style="margin-top: 40rpx;">说明（选填）</view>
+        <view class="input_nav">
+          <textarea
+              style="width: 100%;height: 100%;"
+              placeholder="请输入"
+              v-model="describe"
+          />
+        </view>
+
+
 				<view class="tle" style="margin-top: 40rpx;">备注（选填）</view>
 				<view class="input_nav">
 					<textarea style="width: 100%;height: 100%;" placeholder="请输入" v-model="remark" />
@@ -32,6 +66,7 @@
 	import tabbar from "@/components/tabbar/tabbar.vue"
 	const bmap = require('@/utils/bmapjs/bmap-wx.min.js');
 	import {selectFaceInfo} from "@/api/index.js"
+  import { uploadFile } from '@/utils/http'
 	export default {
 		components: {
 			tabbar
@@ -47,7 +82,13 @@
 				timer: null,
 				subscribe: [], // 订阅消息
 				BMap: null,
-				isNext: false
+				isNext: false,
+
+        // 图片相关
+        imgList: [],
+        serverImgs: [],
+        maxImg: 3,
+        describe: '',
 			}
 		},
 		onLoad() {
@@ -179,39 +220,93 @@
 				})
 			},
 
-			clockClick() {
-				if(!this.isNext) {
-					uni.showModal({
-						title: '提示',
-						content: '您当前还未录入人脸信息，请先录入',
-						success: res => {
-							if(res.confirm) {
-								uni.redirectTo({
-									url: '/pages/face/index'
-								})
-							}
-						}
-					})
-					return
-				}
-				if(this.subscribe.length <= 0)  {
-					this.requestSubscribeMessage()
-				}
-				// let data = {
-				// 	attLon: this.longitude,
-				// 	attLat: this.latitude,
-				// 	attAddress: this.curAdres,
-				// 	remark: this.remark
-				// }
-				// uni.navigateTo({
-				// 	url: '/pages/clock/detail',
-				// })
-				console.log("remark",this.remark);
-				uni.redirectTo({
 
-					url: '/pages/clock/detail?attLon=' + this.longitude + '&attLat=' + this.latitude + '&remark=' + this.remark
+      /* 选图 */
-				})
+      chooseImage() {
-			}
+        uni.chooseImage({
+          count: this.maxImg - this.imgList.length,
+          sourceType: ['camera', 'album'],
+          sizeType: ['compressed'],
+          success: (res) => {
+            this.imgList = this.imgList.concat(res.tempFilePaths)
+          }
+        })
+      },
+
+      removeImg(index) {
+        this.imgList.splice(index, 1)
+        this.serverImgs.splice(index, 1)
+      },
+
+      /* 上传图片 */
+      uploadImages() {
+        return new Promise((resolve, reject) => {
+          let count = 0
+          this.serverImgs = []
+
+          this.imgList.forEach(path => {
+            uploadFile({
+              url: '/file/upload',
+              filePath: path
+            }).then(res => {
+              // 后台返回的完整访问地址
+              this.serverImgs.push(res.url)
+              count++
+              if (count === this.imgList.length) {
+                resolve()
+              }
+            }).catch(err => {
+              reject(err)
+            })
+          })
+        })
+      },
+
+			async clockClick() {
+        if (!this.isNext) {
+          uni.showModal({
+            title: '提示',
+            content: '您当前还未录入人脸信息，请先录入',
+            success: res => {
+              if (res.confirm) {
+                uni.redirectTo({
+                  url: '/pages/face/index'
+                })
+              }
+            }
+          })
+          return
+        }
+
+        if (this.imgList.length < 1) {
+          uni.showToast({title: '请至少上传一张现场照片', icon: 'none'})
+          return
+        }
+
+        try {
+          await this.uploadImages()
+        } catch (e) {
+          uni.showToast({title: '图片上传失败', icon: 'none'})
+          return
+        }
+
+        if (this.subscribe.length <= 0) {
+          this.requestSubscribeMessage()
+        }
+        // let data = {
+        // 	attLon: this.longitude,
+        // 	attLat: this.latitude,
+        // 	attAddress: this.curAdres,
+        // 	remark: this.remark
+        // }
+        // uni.navigateTo({
+        // 	url: '/pages/clock/detail',
+        // })
+        console.log("remark", this.remark);
+        uni.redirectTo({
+          url: '/pages/clock/detail?attLon=' + this.longitude + '&attLat=' + this.latitude + '&remark=' + this.remark + '&describe='+this.describe + '&imgUrl=' + this.serverImgs
+        })
+      }
 		}
 	}
 </script>

src/pages/login/index.vue

@@ -70,10 +70,10 @@
         data() {
             return {
                 form: {
-                    // phone: '15240004260',
+                    phone: '15240004260',
-                    // password: 'GZkq@123456!',
+                    password: 'GZkq@123456!',
-                  phone: '',
+                  // phone: '',
-                  password: '',
+                  // password: '',
                 },
                 version: '3.6.2',
             }

src/utils/http.js

@@ -172,3 +172,51 @@ const request = (options) => {
 // }
 
 export default request
+
+
+/**
+ * 文件上传（MultipartFile）
+ * @param {String} url 接口地址
+ * @param {String} filePath 本地文件路径
+ * @param {Object} formData 额外参数（可选）
+ */
+export function uploadFile({ url, filePath, formData = {} }) {
+    return new Promise((resolve, reject) => {
+        const token = uni.getStorageSync('token')
+
+        uni.uploadFile({
+            url: BASE_URL + url,
+            filePath: filePath,
+            name: 'file', // ⚠️ 必须是 file（对应后台 @RequestParam("file")）
+            formData: formData,
+            header: {
+                token: token || '',
+                Authorization: token || ''
+            },
+            success: (res) => {
+                try {
+                    const data = JSON.parse(res.data)
+                    if (data.code === 200) {
+                        resolve(data)
+                    } else {
+                        reject(data)
+                        uni.showToast({
+                            title: data.msg || '上传失败',
+                            icon: 'none'
+                        })
+                    }
+                } catch (e) {
+                    reject(e)
+                }
+            },
+            fail: (err) => {
+                reject(err)
+                uni.showToast({
+                    title: '文件上传失败',
+                    icon: 'none'
+                })
+            }
+        })
+    })
+}
+