图片上传

subpages/InspectionReport/pages/InspectionReport/InspectionReport.js

@@ -1,6 +1,7 @@
 import {
   $wuxActionSheet
 } from '../../../../components/dist/index'
+const config = require('../../../../utils/config')
 const QQMapWX = require('../../../../utils/qqmap-wx-jssdk')
 const App = getApp()
 
@@ -93,11 +94,7 @@ Page({
       checkResultFlag: this.data.checkResultFlag,
       reviewTime: this.data.reviewTime,
       hiddenDangeList: this.data.hiddenDangeList,
-      attachmentUrls: [{
+      attachmentUrls: this.data.uploadImageList,
-        fileName: '文件'
-      }, {
-        attachmentUrl: 'http://tmp/2JqHQVjACkEA00497265d7c287d505d1c20123e0470c.png'
-      }],
       remark: '123'
     }).then(({
       data
@@ -337,6 +334,7 @@ Page({
       return
     }
     const _this = this
+
     $wuxActionSheet().showSheet({
       buttons: [{
           text: '拍照'
@@ -345,58 +343,90 @@ Page({
           text: '从相册中获取',
           openType: null,
         },
+   
       ],
       className: 'dialog-class',
+      // 进入到这里的方法 index是buttons中的选项的索引值
       buttonClicked(index) {
+        console.log(index)
         if (index === 0) {
           wx.chooseMedia({
-            count: 1,
+            //具体属性看文档
-            sizeType: ['original', 'compressed'],
+            count: 1,  //最多选择的数量
-            sourceType: ['camera'],
+            sizeType: ['original', 'compressed'], //文件的类型
+            sourceType: ['camera'], //可以用进行选择拍摄
             success(res) {
               console.log(res);
+              // 将照片的长度赋值给他
               let deleteLength = _this.data.uploadImageList.length
+              //  .将this中的uploadImageList重新赋值给uploadImageList
               const uploadImageList = [..._this.data.uploadImageList]
+              // 判断数据的大小
               if (res.tempFiles[0].size <= 5 * 1024 * 1024) {
+                //uploadImageList
                 uploadImageList.push({
+                  // 已上传关闭
                   uploaded: false,
+                  // ossUrl服务器
                   ossUrl: {
-                    url:res.tempFiles[0].tempFilePath
+                    // 获取请求中的地址
+                    url: res.tempFiles[0].tempFilePath
                   },
+                  // 图片地址
                   imgUrl: res.tempFiles[0].tempFilePath,
+                  // 将data里边的imageId自动加1
                   imageId: ++_this.data.imageId,
+                  //获取路径的后三位，res.tempFiles[0].tempFilePath.length - 3, 3 从第三个为值截取，截取长度为3
                   type: res.tempFiles[0].tempFilePath.substr(res.tempFiles[0].tempFilePath.length - 3, 3),
+                  //格式，图片
                   format: "image",
+                  // 设置标识符
                   name: 'wximage'
                 })
               } else {
                 _this.showToast('图片上限5M，请压缩后重试~')
                 return false
               }
+              // 将uploadImageList赋值给uploadImageList
               _this.setData({
                 uploadImageList
               })
+              // 上传到服务器
               wx.uploadFile({
+                // 服务器的地址
                 url: `${config.BASEURL()}oss/file/uploadvariedfile`,
+                //上传的本地路径
                 filePath: res.tempFiles[0].tempFilePath,
+                //文件都相应的key
                 name: 'file',
+                // 头部标识
                 header: {
                   'Content-type': 'application/json;charset=UTF-8',
                   'Authorization': wx.getStorageSync('token')
                 },
                 success(fileRes) {
+                  //不懂
+                  console.log("执行了")
+                  console.log(fileRes)
+                  // 这段代码片段中 !JSON.parse(fileRes.data).data 是一个条件表达式，它用于判断 fileRes.data 中是否包含 data 属性的值。
+                  //fileRes将json转化为一个javascript对象
                   if (!JSON.parse(fileRes.data).data) {
                     _this.showToast('图片上传失败，请重试~')
-                    // 删除
+                    // 删除上传失败的图片
+                    // findIndex是找到符合条件的第一个索引
                     const index = _this.data.uploadImageList.findIndex(item => item.imageId === _this.data.imageId)
                     if (index > -1) {
+                      // 删掉splice索引为1
                       _this.data.uploadImageList.splice(index, 1)
+                      //更新uploadImageList
                       _this.setData({
                         uploadImageList: _this.data.uploadImageList
                       })
                     }
                   } else {
+                    // 上传uploaded为true
                     uploadImageList[uploadImageList.length - 1].uploaded = true
+                    // ossUrl为data
                     uploadImageList[uploadImageList.length - 1].ossUrl = JSON.parse(fileRes.data).data
                     _this.setData({
                       uploadImageList
@@ -415,8 +445,8 @@ Page({
         } else if (index === 1) {
           wx.chooseMedia({
             count: 1,
-            type: 'image',
+            type: 'image', //类型是图片
-            sourceType: ['album'],
+            sourceType: ['album'],  //允许从相册李删选
             success(res) {
               console.log(res, '图片上传的res');
               let deleteLength = _this.data.uploadImageList.length
@@ -435,6 +465,7 @@ Page({
                     type: item.tempFilePath.substr(item.tempFilePath.length - 3, 3),
                     originFileName: 'image' + index + 1
                   })
+                  console.log(uploadImageList)
                 } else {
                   _this.showToast('图片上限5M，请压缩后重试~')
                 }
@@ -442,6 +473,8 @@ Page({
               _this.setData({
                 uploadImageList: [..._this.data.uploadImageList, ...uploadImageList]
               })
+              console.log(_this.data.uploadImageList)
+              console.log(uploadImageList)
               uploadImageList.forEach((item, index) => {
                 return (function (index) {
                   wx.uploadFile({
@@ -483,23 +516,12 @@ Page({
         return true
       },
       cancelText: '取消',
+      //cancel()：当用户点击取消按钮时触发的回调函数。你可以在这个回调函数中执行相应的操作，比如关闭弹出框或者执行其他逻辑。
+
+      //destructiveButtonClicked()：当用户点击了破坏性按钮（如果有）时触发的回调函数。破坏性按钮通常用于执行一些危险操作，比如删除或者清除数据等。
       cancel() {},
       destructiveButtonClicked() {},
     })
-    // wx.chooseMedia({
-    //   count: 1,
-    //   sizeType: ['original', 'compressed'],
-    //   sourceType: ['album', 'camera'],
-    //   success(res) {
-    //     console.log(res)
-    //     const tempFilePaths = res.tempFilePaths;
-    //     // 将选定的图片显示在页面上
-    //     this.setData({
-    //       imageUrl: tempFilePaths[0]
-    //     });
-    //     console.log(this.data.imageUrl)
-    //   }
-    // })
   },
   // 删除选中的图片
   deleteImage(e) {

subpages/InspectionReport/pages/InspectionReport/InspectionReport.json

@@ -1,6 +1,9 @@
 {
     "navigationBarTitleText": "安检巡查",
     "usingComponents": {
+      "wux-actionsheet": "../../../../components/dist/actionsheet/index",
+      "wux-segmented-control": "../../../../components/dist/segmented-control/index",
+      "wux-cell-group": "../../../../components/dist/cell-group/index",
       "van-uploader": "@vant/weapp/uploader/index",
       "van-checkbox": "@vant/weapp/checkbox/index",
       "van-checkbox-group": "@vant/weapp/checkbox-group/index",

subpages/InspectionReport/pages/InspectionReport/InspectionReport.wxml

@@ -37,7 +37,6 @@
       <image src="../../../../images/right.png" class="prosecutors_img"></image>
     </view>
   </view>
-
   <view class="pitfall">
     <view class="prosecutors">
       <view>
@@ -109,7 +108,7 @@
     </view>
   </view>
   <view class="attachment">
-    <!-- <view class="image-box">
+    <view class="image-box">
             <view class="{{ uploadImageList.length < 4 ? 'image-list' : uploadImageList.length > 3 && uploadImageList.length < 7  ? 'image-list image-list-2' : uploadImageList.length > 6 && uploadImageList.length < 10 ? 'image-list image-list-3' : 'image-list image-list-4' }}">
               <view class=" image-list-label">
                   <view class="field-text">上传图片</view>
@@ -121,14 +120,12 @@
               wx:for-item="item"
               wx:key="imageId">
               <image class="issue-image" src="{{item.ossUrl.url}}" />
-              <image wx:if="{{!item.uploaded}}" class="loading" src="../../../images/loading.gif" />
+              <image wx:if="{{!item.uploaded}}" class="loading" src="../../../../images/loading.gif" />
-              <image bindtap="deleteImage" data-imageid="{{item.imageId}}" class="close" wx:else src="../../../images/sc.png" />
+              <image bindtap="deleteImage" data-imageid="{{item.imageId}}" class="close" wx:else src="../../../../images/loading.gif" />
             </view>
-            <image wx:if="{{uploadImageList.length < 3}}" src="../../../images/ig_tianjiatupian@2x.png" bindtap="chooseImage" />
+            <image wx:if="{{uploadImageList.length < 3}}" src="../../../../images/addphoto.png" bindtap="chooseImage" />
           </view>
-         </view> -->
+         </view>
-    <text class="text1">附件</text>
-    <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
     <text class="text1">备注</text>
     <view class="textarea1">
       <textarea placeholder-style="color: #C1C1C1;"   bindinput="bindRemarkInput" maxlength="100" placeholder-class="gray" placeholder="请输入" />
@@ -141,7 +138,7 @@
     <text class="btn_text">提交</text>
   </view>
 </view>
-
+<wux-actionsheet id="wux-actionsheet" />
 <van-popup show="{{ showPopup }}" closeable close-icon="close" position="bottom" custom-style="height: 50%" bind:close="onClose">
   <view class="popup-content">
     <van-checkbox-group value="{{selectedOptions}}" bind:change="onChange1">

subpages/InspectionReport/pages/InspectionReport/InspectionReport.wxss

@@ -353,6 +353,10 @@ page {
   width: 200rpx;
   height: 200rpx;
 }
+.image-box .image-list-label {
+  position: absolute;
+  top: 35rpx;
+}
 .text1{
   width: 62rpx;
   height: 30rpx;
@@ -579,8 +583,55 @@ margin-bottom: 20rpx;
   box-sizing: border-box;
   padding: 34rpx 24rpx;
   position: relative;
+  display: flex;
+  /* display: flex;
+  align-items: center; */
+}
+.image-list {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 214rpx 214rpx 214rpx;
+  grid-template-rows: 214rpx;
+  grid-gap: 17rpx;
+  height: 188rpx;
+  margin-top:80rpx ;
+}
+.image-list-2 {
+  height: 428rpx !important;
+}
+.image-list-3 {
+  height: 642rpx !important;
+}
+.image-list-4 {
+  height: 856rpx !important;
+}
+ .image-list .image-item {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+ .image-list image {
+  /* width: 100%; */
+  /* height: 100%; */
+  width: 180rpx;
+  height: 180rpx;
+  object-fit: cover;
+  border-radius: 8rpx;
+}
+ .image-list .image-item .loading {
+  position: absolute;
+  left: 25%;
+  top: 25%;
+  width: 50%;
+  height: 50%;
+}
+ .image-list .image-item .close {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  width: 40rpx;
+  height: 40rpx;
 }
-
 .header{
   height: 80rpx;
   display: flex;

subpages/securityCheck/pages/securityCheck.js

@@ -3,7 +3,7 @@ import {securityCheckk} from "../../../utils/api";
 Page({
     data: {
       pageNo: 1,
-      pageSize: 10,
+      pageSize:10,
       id: 0,
       waitingCheckStyle: "color: #1974ec;border-bottom: 2px solid blue;",
       qualifiedStyle: "",