feat: 修改数据

src/components/zj-upload/index.vue

@@ -29,247 +29,248 @@
 </template>
 
 <script>
-import store from '@/store/index.js'
-import axios from 'axios'
-// import { upload } from "@/common/http/upload-file.js";
-import api from '@/common/http/'
-import { uploadImgs } from '@/common/utils/util.js'
-import { b64_md5 } from '@/common/utils/md5.js'
-import loadingImg from './loading.png'
-export default {
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    count: {
-      type: Number,
-      default: 0
+  import store from '@/store/index.js'
+  import axios from 'axios'
+  // import { upload } from "@/common/http/upload-file.js";
+  import api from '@/common/http/'
+  import {
+    uploadImgs
+  } from '@/common/utils/util.js'
+  import {
+    b64_md5
+  } from '@/common/utils/md5.js'
+  import loadingImg from './loading.png'
+  import {
+    getUserInfo
+  } from "@/common/utils/util"
+  export default {
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      count: {
+        type: Number,
+        default: 0
+      },
+      fileList: {
+        type: Array,
+        default: () => []
+      }
     },
-    fileList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      showLoading: false,
-      imageUrl: this.$imageUrl,
-      files: this.setFileVal(this.fileList)
-    }
-  },
-  watch: {
-    fileList() {
-      this.files = this.setFileVal(this.fileList)
+    data() {
+      return {
+        showLoading: false,
+        imageUrl: this.$imageUrl,
+        files: this.setFileVal(this.fileList)
+      }
     },
-    files: {
-      handler(newName, oldName) {
-        if (newName.every(item => (item.url ? true : false))) {
-          this.$emit(
-            'getFiles',
-            newName.map(item => item.url)
-          )
-        }
+    watch: {
+      fileList() {
+        this.files = this.setFileVal(this.fileList)
       },
-      deep: true
-    }
-  },
-  methods: {
-    // 检查文件类型
-    checkFileType(url) {
-      if (!url) return ''
-      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
-
-      if (
-        [
-          'jpg',
-          'jpeg',
-          'png',
-          'cdr',
-          'bmp',
-          'dip',
-          'pcp',
-          'dif',
-          'wmf',
-          'gif',
-          'tif',
-          'eps',
-          'psd',
-          'iff',
-          'tga',
-          'pcd',
-          'mpt',
-          'webp'
-        ].includes(fileSuffix)
-      ) {
-        return 'image'
-      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
-        return 'word'
-      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
-        return 'excel'
-      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
-        return 'ppt'
-      } else if (['pdf'].includes(fileSuffix)) {
-        return 'pdf'
-      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
-        return 'file'
-      }
-      {
-        return 'pdf'
+      files: {
+        handler(newName, oldName) {
+          if (newName.every(item => (item.url ? true : false))) {
+            this.$emit(
+              'getFiles',
+              newName.map(item => item.url)
+            )
+          }
+        },
+        deep: true
       }
     },
+    methods: {
+      // 检查文件类型
+      checkFileType(url) {
+        if (!url) return ''
+        const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
 
-    setFileVal(arr) {
-      return arr.map(item => {
-        if (typeof item == 'string') {
-          return {
-            url: item,
-            key: b64_md5(item)
-          }
-        } else {
-          return item
+        if (
+          [
+            'jpg',
+            'jpeg',
+            'png',
+            'cdr',
+            'bmp',
+            'dip',
+            'pcp',
+            'dif',
+            'wmf',
+            'gif',
+            'tif',
+            'eps',
+            'psd',
+            'iff',
+            'tga',
+            'pcd',
+            'mpt',
+            'webp'
+          ].includes(fileSuffix)
+        ) {
+          return 'image'
+        } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
+          return 'word'
+        } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
+          return 'excel'
+        } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
+          return 'ppt'
+        } else if (['pdf'].includes(fileSuffix)) {
+          return 'pdf'
+        } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
+          return 'file'
+        } {
+          return 'pdf'
         }
-      })
-    },
-    upload() {
-      uni.chooseImage({
-        // count: this.count === 0 ? 0 : this.count - this.files.length,
-        count: 1,
-        success: async res => {
-          this.showLoading = true
-          let pathType = this.checkFileType(res.tempFiles[0].name)
-          if (pathType !== 'image') {
-            return this.$toast('当前格式仅支持jpg, jpeg, png，请检查')
-          }
-          //  #ifdef H5
-          const value = uni.getStorageSync('recycle_mobile_user')
-          // 获取选择的文件路径
-          let phone = value.mobile
-          phone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+      },
 
-          const formData = new FormData()
-          formData.append('positionName', phone)
-          formData.append('file', res.tempFiles[0])
-          // 配置axios请求参数
-          const config = {
-            method: 'post',
-            url: process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API + '/common/image/generate/watermark', // 上传文件的服务器地址
-            data: formData,
-            headers: {
-              'Content-Type': 'multipart/form-data',
-              'X-Token': store.getters.token
+      setFileVal(arr) {
+        return arr.map(item => {
+          if (typeof item == 'string') {
+            return {
+              url: item,
+              key: b64_md5(item)
             }
+          } else {
+            return item
           }
-          // 发送上传请求
-          axios(config)
-            .then(response => {
-              // 处理上传成功的响应数据
-              this.files.push({
-                url: response.data.data
-              })
-              this.showLoading = false
-            })
-            .catch(error => {
-              // 处理上传失败的错误
-              this.showLoading = false
+        })
+      },
+      upload() {
+        uni.chooseImage({
+          count: 1,
+          success: async res => {
+            this.showLoading = true
+            let pathType = this.checkFileType(res.tempFiles[0].name)
+            if (pathType !== 'image') {
+              return this.$toast('当前格式仅支持jpg, jpeg, png，请检查')
+            }
+            //  #ifdef H5
+            getUserInfo().then(() => {
+              const value = uni.getStorageSync('recycle_mobile_user')
+              // 获取选择的文件路径
+              let phone = value.mobile
+              phone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+              const formData = new FormData()
+              formData.append('positionName', phone)
+              formData.append('file', res.tempFiles[0])
+              // 配置axios请求参数
+              const config = {
+                method: 'post',
+                url: process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API +
+                  '/common/image/generate/watermark', // 上传文件的服务器地址
+                data: formData,
+                headers: {
+                  'Content-Type': 'multipart/form-data',
+                  'X-Token': store.getters.token
+                }
+              }
+              // 发送上传请求
+              axios(config)
+                .then(response => {
+                  // 处理上传成功的响应数据
+                  this.files.push({
+                    url: response.data.data
+                  })
+                  this.showLoading = false
+                })
+                .catch(error => {
+                  // 处理上传失败的错误
+                  this.showLoading = false
+                })
             })
+            //  #endif
 
-          // uploadImgs(res.tempFiles[0]).then(res => {
-          //   this.files.push({
-          //     url: res.url
-          //   })
-          // })
-          //  #endif
-
-          // #ifdef MP-WEIXIN
+            // #ifdef MP-WEIXIN
 
-          // #endif
-        },
-        fail: err => {
-          this.showLoading = false
-        }
-      })
-    },
-    del(index) {
-      this.files.splice(index, 1)
-    },
-    imgView(index) {
-      var list = this.files.map(item => {
-        if (item.url) {
-          return this.imageUrl + item.url
-        } else {
-          return loadingImg
-        }
-      })
-      uni.previewImage({
-        current: index,
-        urls: list
-      })
+            // #endif
+          },
+          fail: err => {
+            this.showLoading = false
+          }
+        })
+      },
+      del(index) {
+        this.files.splice(index, 1)
+      },
+      imgView(index) {
+        var list = this.files.map(item => {
+          if (item.url) {
+            return this.imageUrl + item.url
+          } else {
+            return loadingImg
+          }
+        })
+        uni.previewImage({
+          current: index,
+          urls: list
+        })
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.file-upload-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  .file-upload-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-  .file-upload-view {
-    display: inline-block;
-    margin-bottom: 20rpx;
+    .file-upload-view {
+      display: inline-block;
+      margin-bottom: 20rpx;
 
-    &:nth-last-of-type(-n + 2) {
-      margin-bottom: 0;
-    }
+      &:nth-last-of-type(-n + 2) {
+        margin-bottom: 0;
+      }
 
-    .file-upload-ckick {
-      width: 300rpx;
-      height: 190rpx;
-      background: #ffffff;
-      border-radius: 20rpx;
-      opacity: 1;
-      border: 1rpx solid #e4e4e4;
-      box-sizing: border-box;
-      padding: 10rpx;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      .file-upload-ckick {
+        width: 300rpx;
+        height: 190rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        opacity: 1;
+        border: 1rpx solid #e4e4e4;
+        box-sizing: border-box;
+        padding: 10rpx;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-      .mack {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 2;
-        background: rgba(0, 0, 0, 0.2);
-      }
+        .mack {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 2;
+          background: rgba(0, 0, 0, 0.2);
+        }
 
-      .uploadImg {
-        width: 80rpx;
-        height: 80rpx;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 3;
-      }
+        .uploadImg {
+          width: 80rpx;
+          height: 80rpx;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 3;
+        }
 
-      .delImg {
-        position: absolute;
-        top: -16rpx;
-        right: -16rpx;
-        z-index: 2;
-        width: 40rpx;
-        height: 40rpx;
+        .delImg {
+          position: absolute;
+          top: -16rpx;
+          right: -16rpx;
+          z-index: 2;
+          width: 40rpx;
+          height: 40rpx;
+        }
       }
     }
   }
-}
 </style>