Browse Source

add upload

warrior 1 week ago
parent
commit
cb4a14ad82

+ 38 - 4
package-lock.json

@@ -21,7 +21,7 @@
         "@ionic/angular-toolkit": "^11.0.1",
         "@ionic/angular-toolkit": "^11.0.1",
         "@ionic/core": "^8.4.0",
         "@ionic/core": "^8.4.0",
         "parse": "^5.3.0",
         "parse": "^5.3.0",
-        "qiniu-js": "^4.0.0-beta.6",
+        "qiniu-js": "^3.1.2",
         "rxjs": "~7.8.0",
         "rxjs": "~7.8.0",
         "swiper": "^11.1.14",
         "swiper": "^11.1.14",
         "tslib": "^2.3.0",
         "tslib": "^2.3.0",
@@ -2311,6 +2311,18 @@
         "node": ">=6.9.0"
         "node": ">=6.9.0"
       }
       }
     },
     },
+    "node_modules/@babel/runtime-corejs2": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs2/-/runtime-corejs2-7.26.0.tgz",
+      "integrity": "sha512-AQKSxUdaM7uTEGFmLZj1LOgX3LaLdt4udjqywaVdN6R5P2KAgqtBkDW4TS2ySRYNqcKmEe8Xv96jegHJNNb7Gg==",
+      "dependencies": {
+        "core-js": "^2.6.12",
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/runtime-corejs3": {
     "node_modules/@babel/runtime-corejs3": {
       "version": "7.24.7",
       "version": "7.24.7",
       "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.7.tgz",
       "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.7.tgz",
@@ -5810,6 +5822,13 @@
         "webpack": "^5.1.0"
         "webpack": "^5.1.0"
       }
       }
     },
     },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/core-js-compat": {
     "node_modules/core-js-compat": {
       "version": "3.39.0",
       "version": "3.39.0",
       "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.39.0.tgz",
       "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.39.0.tgz",
@@ -6629,6 +6648,11 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
       "dev": true
     },
     },
+    "node_modules/exif-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/exif-js/-/exif-js-2.3.0.tgz",
+      "integrity": "sha512-1Og9pAzG2FZRVlaavH8bB8BTeHcjMdJhKmeQITkX+uLRCD0xPtKAdZ2clZmQdJ56p9adXtJ8+jwrGp/4505lYg=="
+    },
     "node_modules/exponential-backoff": {
     "node_modules/exponential-backoff": {
       "version": "3.1.1",
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
       "resolved": "https://registry.npmmirror.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
@@ -10411,9 +10435,14 @@
       "dev": true
       "dev": true
     },
     },
     "node_modules/qiniu-js": {
     "node_modules/qiniu-js": {
-      "version": "4.0.0-beta.6",
-      "resolved": "https://registry.npmmirror.com/qiniu-js/-/qiniu-js-4.0.0-beta.6.tgz",
-      "integrity": "sha512-XNNlgwiEq7wERK+Xew9L+Q7ql0PHV8F4LbW99BWnRSP94IlAP0GQxKiIhgrG7qhDNyjKJop3mYdlWOqbtPxKew=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/qiniu-js/-/qiniu-js-3.1.2.tgz",
+      "integrity": "sha512-ZzSFNZXvhtbmvXvHlm8+umiKoGH+CxjuDPvl80sj1NzxLxvZ7SDn58jx65uXdOBhd+laNoqmKNBXCmw4QuQhuA==",
+      "dependencies": {
+        "@babel/runtime-corejs2": "^7.10.2",
+        "exif-js": "^2.3.0",
+        "spark-md5": "^3.0.0"
+      }
     },
     },
     "node_modules/qjobs": {
     "node_modules/qjobs": {
       "version": "1.2.0",
       "version": "1.2.0",
@@ -11476,6 +11505,11 @@
         "node": ">=0.10.0"
         "node": ">=0.10.0"
       }
       }
     },
     },
+    "node_modules/spark-md5": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/spark-md5/-/spark-md5-3.0.2.tgz",
+      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw=="
+    },
     "node_modules/spdx-correct": {
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz",
       "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz",

+ 1 - 1
package.json

@@ -23,7 +23,7 @@
     "@ionic/angular-toolkit": "^11.0.1",
     "@ionic/angular-toolkit": "^11.0.1",
     "@ionic/core": "^8.4.0",
     "@ionic/core": "^8.4.0",
     "parse": "^5.3.0",
     "parse": "^5.3.0",
-    "qiniu-js": "^4.0.0-beta.6",
+    "qiniu-js": "^3.1.2",
     "rxjs": "~7.8.0",
     "rxjs": "~7.8.0",
     "swiper": "^11.1.14",
     "swiper": "^11.1.14",
     "tslib": "^2.3.0",
     "tslib": "^2.3.0",

+ 17 - 4
projects/live-app/src/app/components/upload/upload.component.html

@@ -7,17 +7,30 @@
 >
 >
   @for (item of fileList; track $index) {
   @for (item of fileList; track $index) {
   <div class="image-content">
   <div class="image-content">
-    <img [style.height]="fileHeight + 'px'" [src]="item.url" alt="" />
-    <div class="del" (click)="onDelete($index)"><ion-icon name="close-outline"></ion-icon></div>
+    <img (click)="onPreview(item.url)" [style.height]="fileHeight + 'px'" [src]="item.url" alt="" />
+    <div class="del" (click)="onDelete($index)">
+      <ion-icon name="close-outline"></ion-icon>
+    </div>
   </div>
   </div>
   } @if (fileList.length < maxlenght) {
   } @if (fileList.length < maxlenght) {
   <div class="up-bloak" [style.height]="fileHeight + 'px'">
   <div class="up-bloak" [style.height]="fileHeight + 'px'">
     <ion-icon
     <ion-icon
       [style.height]="fileHeight - 48 + 'px'"
       [style.height]="fileHeight - 48 + 'px'"
-      [style.width]="fileHeight - 48 + 'px'"
+      [style.width]="fileWidth - 48 + 'px'"
       name="cloud-upload-outline"
       name="cloud-upload-outline"
     ></ion-icon>
     ></ion-icon>
-    <input type="file" multiple (change)="onAdd($event)" accept="image/*" />
+    <input
+      type="file"
+      [multiple]="multiple"
+      (change)="onAdd($event)"
+      [accept]="accept"
+    />
   </div>
   </div>
   }
   }
 </div>
 </div>
+@if (currentPreviewImg) {
+  <div class="preview" (click)="currentPreviewImg = ''">
+    <img [src]="currentPreviewImg" alt="">
+  </div>
+}
+

+ 15 - 0
projects/live-app/src/app/components/upload/upload.component.scss

@@ -44,3 +44,18 @@
     }
     }
   }
   }
 }
 }
+.preview{
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 80%);
+  z-index: 9;
+  img{
+    width: 300px;
+  }
+}

+ 246 - 103
projects/live-app/src/app/components/upload/upload.component.ts

@@ -1,8 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ToastController, IonicModule } from '@ionic/angular';
+import {
+  ToastController,
+  IonicModule,
+  LoadingController,
+} from '@ionic/angular';
 import * as Parse from 'parse';
 import * as Parse from 'parse';
-// import * as qiniu from 'qiniu-js'
-import { createDirectUploadTask, createMultipartUploadV2Task, FileData } from 'qiniu-js';
+import * as qiniu from 'qiniu-js';
 @Component({
 @Component({
   selector: 'app-upload',
   selector: 'app-upload',
   templateUrl: './upload.component.html',
   templateUrl: './upload.component.html',
@@ -11,21 +14,17 @@ import { createDirectUploadTask, createMultipartUploadV2Task, FileData } from 'q
   imports: [IonicModule],
   imports: [IonicModule],
 })
 })
 export class UploadComponent implements OnInit {
 export class UploadComponent implements OnInit {
-  @Input('title') title: string = '上传文件';
   @Input('files') files: Array<any> = [];
   @Input('files') files: Array<any> = [];
   @Input('boxWidth') boxWidth: number = 390; //盒子宽度
   @Input('boxWidth') boxWidth: number = 390; //盒子宽度
   @Input('fileWidth') fileWidth: number = 86; //图片高度
   @Input('fileWidth') fileWidth: number = 86; //图片高度
   @Input('fileHeight') fileHeight: number = 86; //图片宽度
   @Input('fileHeight') fileHeight: number = 86; //图片宽度
 
 
   @Input('maxlenght') maxlenght: number = 1; //文件数量限制
   @Input('maxlenght') maxlenght: number = 1; //文件数量限制
-  @Input('type') type: string = 'file';
+  @Input('type') type: string = 'image';
   @Input('size') size: number = 2048; //上传文件限制大小单位KB
   @Input('size') size: number = 2048; //上传文件限制大小单位KB
-  @Output() change: EventEmitter<any> = new EventEmitter<any>();
-
+  @Input('multiple') multiple: boolean = false; //是否允许选择多张
+  @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
   showBlockNum: number = 4; //每行显示数量
   showBlockNum: number = 4; //每行显示数量
-  // uptoken: string = '';
-  // domain: string = '';
-  // bucket: string = '';
   get accept() {
   get accept() {
     let type;
     let type;
     switch (this.type) {
     switch (this.type) {
@@ -54,16 +53,20 @@ export class UploadComponent implements OnInit {
     domain: '',
     domain: '',
     bucket: '',
     bucket: '',
   };
   };
-  fileList: any = [
-    // {
-    //   name: 'xxx.png',
-    //   status: 'done',
-    //   url: 'http://www.baidu.com/xxx.png'
-    // },
-  ];
+  fileList: Array<{
+    url: string;
+    name: string;
+    type: string;
+    size?: number;
+    file?: any;
+  }> = [];
   Previewfilelist: any; //预览图片数组
   Previewfilelist: any; //预览图片数组
-
-  constructor(public toastController: ToastController) {
+  loading: any;
+  currentPreviewImg:string = ''
+  constructor(
+    public toastController: ToastController,
+    public loadCtrl: LoadingController
+  ) {
     Parse.Cloud.run('qiniu_uptoken', { company: this.company }).then((data) => {
     Parse.Cloud.run('qiniu_uptoken', { company: this.company }).then((data) => {
       this.config = {
       this.config = {
         uptoken: data.uptoken,
         uptoken: data.uptoken,
@@ -72,12 +75,9 @@ export class UploadComponent implements OnInit {
       };
       };
     });
     });
   }
   }
-
   ngOnInit() {
   ngOnInit() {
     /* 计算文件布局 */
     /* 计算文件布局 */
     let n = Math.floor(this.boxWidth / this.fileWidth);
     let n = Math.floor(this.boxWidth / this.fileWidth);
-    console.log(n);
-    console.log(this.boxWidth);
     if (n * this.fileWidth + (n - 1) * 10 > this.boxWidth) {
     if (n * this.fileWidth + (n - 1) * 10 > this.boxWidth) {
       this.showBlockNum = n - 1;
       this.showBlockNum = n - 1;
     } else {
     } else {
@@ -88,15 +88,18 @@ export class UploadComponent implements OnInit {
       return {
       return {
         url: item?.url,
         url: item?.url,
         name: item?.name,
         name: item?.name,
-        type: 'link',
-        status: 'done',
+        type: 'http',
+        // status: 'done',
       };
       };
     });
     });
     this.Previewfilelist = this.fileList;
     this.Previewfilelist = this.fileList;
   }
   }
-  onDelete(index:number){
+  onPreview(url:string){
+    this.currentPreviewImg = url
+  }
+  onDelete(index: number) {
     console.log(index);
     console.log(index);
-    this.fileList.splice(index,1)
+    this.fileList.splice(index, 1);
   }
   }
   async onAdd(e: any) {
   async onAdd(e: any) {
     let files = e.target.files;
     let files = e.target.files;
@@ -113,97 +116,237 @@ export class UploadComponent implements OnInit {
       const f = files[index];
       const f = files[index];
       this.changeFileReader(f);
       this.changeFileReader(f);
     }
     }
+    console.log(this.fileList);
   }
   }
   //转图片格式
   //转图片格式
   changeFileReader(file: any) {
   changeFileReader(file: any) {
     return new Promise((res) => {
     return new Promise((res) => {
-      const reader: any = new FileReader();
-      reader.readAsDataURL(file);
-      reader.filename = file.name;
-      console.log(file);
-      // filelist.push(file);
-      // 当文件读取成功时执行的函数
-      let _this = this;
-      reader.onload = async function (e: any) {
-        let size = e.total / 1024; //KB
-        let baseUrl = e.target.result;
-        if (size > _this.size) {
-          const toast = await _this.toastController.create({
-            message: file.name + '文件过大',
-            color: 'warning',
-            duration: 1000,
-          });
-          toast.present();
-          res(true);
-          return;
-        }
-        _this.fileList.push({
-          url: baseUrl,
-          size: size,
-          name: file.name || '未知',
-          type: 'local',
-        });
-        res(true);
-      };
+      const windowURL = window.URL || window.webkitURL;
+      const src = windowURL.createObjectURL(file);
+      let size = file.size / 1024; //KB
+      this.fileList.push({
+        url: src,
+        size: size,
+        name: file.name || '未知',
+        type: 'local',
+        file: file,
+      });
+      res(true);
+      return;
+      // const reader: any = new FileReader();
+      // reader.readAsDataURL(file);
+      // reader.filename = file.name;
+      // console.log(file);
+      // let _this = this;
+      // reader.onload = async function (e: any) {
+      //   let size = e.total / 1024; //KB
+      //   let baseUrl = e.target.result;
+      //   if (size > _this.size) {
+      //     const toast = await _this.toastController.create({
+      //       message: file.name + '文件过大',
+      //       color: 'warning',
+      //       duration: 1000,
+      //     });
+      //     toast.present();
+      //     res(true);
+      //     return;
+      //   }
+      //   _this.fileList.push({
+      //     url: baseUrl,
+      //     size: size,
+      //     name: file.name || '未知',
+      //     type: 'local',
+      //     file: file,
+      //   });
+      //   res(true);
+      // };
     });
     });
   }
   }
 
 
-  onUpload(){
-    let fs = this.fileList
+  async onUpload() {
+    let authLoad = await this.authSpaceCount();
+    if (!authLoad) {
+      const toast = await this.toastController.create({
+        message: '文件存储空间已满,请联系维护人员。',
+        color: 'warning',
+        duration: 1000,
+      });
+      toast.present();
+    }
+    let fs = this.fileList;
+    this.loading = await this.loadCtrl.create({ message: '上传中' });
+    this.loading.present();
     for (let index = 0; index < fs.length; index++) {
     for (let index = 0; index < fs.length; index++) {
       const f = fs[index];
       const f = fs[index];
-      if(f.type == 'local'){
+      if (f.type == 'local') {
         console.log(f);
         console.log(f);
-        this.onQiniuUpFile(f)
+        let url = await this.onQiniuUpFile(f);
+        await this.saveAttachment({
+          size: f.size,
+          url: url,
+          name: f.name,
+          type: this.fileList[index].file.type,
+        });
+        this.fileList[index].url = url;
+        this.fileList[index].type = 'http';
+        delete this.fileList[index].file;
+        delete this.fileList[index].size;
       }
       }
     }
     }
-    this.change.emit(this.fileList)
+    this.onChange.emit(this.fileList);
+    this.loading.dismiss();
   }
   }
-  onQiniuUpFile(file:any){
-    // return new Promise((resolve, reject) => {
-      // console.log("进入了上传")
-      // const fileData: FileData = { type: 'file', data: file.url}
-      const fileData: FileData = { type: 'string', data: file.url }
-      // const fileData: FileData = { type: 'array-buffer', data: new ArrayBuffer(1e3) }
+  /* 校验存储空间 */
+  async authSpaceCount(): Promise<boolean> {
+    let company = this.company;
+    let query = new Parse.Query('Company');
+    query.select('configSpace');
+    let comObj = await query.get(company);
+    let limit = comObj.get('configSpace') && comObj.get('configSpace').limit;
+    // return new Promise((res, rej) => {
+    let res = await fetch(
+      `https://server.fmode.cn/api/storage/space?c=${company}`
+    );
+    let data = await res.json();
+    console.log(data);
+    if (data?.code == 200) {
+      let spaceMap = data.data;
+      let _spaceLimit = this.getLimitBytes(limit);
+      let spaceUsed = spaceMap.totalSize;
+      console.log('总空间:', _spaceLimit);
+      console.log('已用空间:', spaceUsed);
+      if (!_spaceLimit || spaceUsed > _spaceLimit) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  }
+  // 单位
+  getLimitBytes(limit: string) {
+    let u: number = 1024 * 1024 * 1024;
+    if (limit) {
+      let num = Number(limit.slice(0, limit.length - 2));
+      let unit: string = limit.slice(-2);
+      switch (unit) {
+        case 'EB':
+          u = 1024 * 1024 * 1024 * 1024 * 1024 * 1024;
+          break;
+        case 'PB':
+          u = 1024 * 1024 * 1024 * 1024 * 1024;
+          break;
+        case 'TB':
+          u = 1024 * 1024 * 1024 * 1024;
+          break;
+        case 'GB':
+          u = 1024 * 1024 * 1024;
+          break;
+        case 'MB':
+          u = 1024 * 1024;
+          break;
+        case 'KB':
+          u = 1024;
+          break;
+        default:
+          break;
+      }
+      return num * u;
+    }
+    return u;
+  }
+  onQiniuUpFile(file: any): Promise<string> {
+    return new Promise((resolve, reject) => {
+      console.log('进入了上传');
+      let datepath = this.DateFormat(new Date(), 'hhmmss');
+      let qiniuFileKey = this.company + '/' + datepath + '/' + file.name;
+      const putExtra = {
+        fname: '',
+        params: {},
+        mimeType: this.accept,
+      };
       const config = {
       const config = {
-        tokenProvider:async () => {
-         return this.config.uptoken
-        }
+        useCdnDomain: true, //使用cdn加速
       };
       };
-      createDirectUploadTask(fileData, config).start()
-      .then((result:any) => {
-         // 处理任务完成结果
-         console.log(result);
-         let res = JSON.parse(result.result)
-         console.log(`${this.config.domain}${res.key}`)
-       })
-       .catch((error) => {
-        console.error(error);
-         // 处理任务启动失败错误
-       });
-    //   const observable = qiniu.createDirectUploadTask(file, qiniuFileKey, token, putExtra, config);
-    //   observable.subscribe({
-    //     next: (result) => {
-    //       // 主要用来展示进度
-    //       console.warn(result);
-    //     },
-    //     error: async (err) => {
-    //       // this.$notify('上传图片失败');
-    //       await _this.presentToast(`文件上传失败`, 1500, "danger");
-    //       console.log(err)
-    //       _this.loading.dismiss()
-    //     },
-    //     complete: (res) => {
-    //       console.log("上传完成")
-    //       console.log(res.key);
-    //       console.log(`${_this.domain}${res.key}`)
-    //       resolve(`${_this.domain}${res.key}`)
-    //       _this.loading.dismiss()
-    //     },
-    //   });
-    // }).catch(err => {
-    //   console.log(err)
-    //   _this.loading.dismiss()
-    // })
+      const observable = qiniu.upload(
+        file.file,
+        qiniuFileKey,
+        this.config.uptoken,
+        putExtra,
+        config
+      );
+      observable.subscribe({
+        next: (result) => {
+          // 主要用来展示进度
+          console.log('上传===', result);
+        },
+        error: async (err) => {
+          console.error(err);
+          const toast = await this.toastController.create({
+            message: '上传失败',
+            color: 'warning',
+            duration: 1000,
+          });
+          toast.present();
+          reject(err);
+        },
+        complete: (res) => {
+          console.log('上传完成');
+          console.log(res.key);
+          console.log(`${this.config.domain}${res.key}`);
+          resolve(`${this.config.domain}${res.key}`);
+          // this.loading.dismiss();
+        },
+      });
+    });
+  }
+  async saveAttachment(
+    file: { size?: number; url: string; name: string; type: string },
+    cateId?: string
+  ) {
+    let Attachment = Parse.Object.extend('Attachment');
+    let attachment = new Attachment();
+    file.size && attachment.set('size', Math.ceil(file.size));
+    attachment.set('url', file.url);
+    attachment.set('name', file.name);
+    attachment.set('mime', file.type);
+    attachment.set('company', {
+      __type: 'Pointer',
+      className: 'Company',
+      objectId: this.company,
+    });
+    cateId &&
+      attachment.set('category', {
+        __type: 'Pointer',
+        className: 'Category',
+        objectId: cateId,
+      });
+    return await attachment.save();
+  }
+
+  DateFormat(date: Date, fmt: string) {
+    //author: meizz
+    let o: any = {
+      'M+': date.getMonth() + 1, //月份
+      'd+': date.getDate(), //日
+      'h+': date.getHours(), //小时
+      'm+': date.getMinutes(), //分
+      's+': date.getSeconds(), //秒
+      'q+': Math.floor((date.getMonth() + 3) / 3), //季度
+      S: date.getMilliseconds(), //毫秒
+    };
+    if (/(y+)/.test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+      );
+    for (let k in o)
+      if (new RegExp('(' + k + ')').test(fmt))
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length == 1
+            ? o[k]
+            : ('00' + o[k]).substr(('' + o[k]).length)
+        );
+    return fmt;
   }
   }
 }
 }

+ 10 - 2
projects/live-app/src/moduls/user/album/album.component.html

@@ -10,9 +10,17 @@
   </ion-toolbar>
   </ion-toolbar>
 </ion-header>
 </ion-header>
 <ion-content class="content">
 <ion-content class="content">
+  @if (loading) {
   <div class="upload">
   <div class="upload">
-
-    <app-upload (change)="onSave($event)" #upload [maxlenght]="8" [files]="files" [boxWidth]="300" ></app-upload>
+    <app-upload
+      (onChange)="onSave($event)"
+      #upload
+      [maxlenght]="12"
+      [files]="files"
+      [fileWidth]="80"
+      [fileHeight]="80"
+    ></app-upload>
   </div>
   </div>
   <ion-button class="add_btn" (click)="upload.onUpload()">保存</ion-button>
   <ion-button class="add_btn" (click)="upload.onUpload()">保存</ion-button>
+  }
 </ion-content>
 </ion-content>

+ 13 - 8
projects/live-app/src/moduls/user/album/album.component.scss

@@ -1,8 +1,13 @@
-	.add_btn {
-		position: fixed;
-		bottom: 1vh;
-		width: 80%;
-		left: 10vw;
-		background: #92a1ff;
-		border-radius: 18px;
-	}
+.add_btn {
+  position: fixed;
+  bottom: 1vh;
+  width: 80%;
+  left: 10vw;
+  background: #92a1ff;
+  border-radius: 18px;
+}
+.content {
+  .upload {
+    margin: 10px auto;
+  }
+}

+ 47 - 29
projects/live-app/src/moduls/user/album/album.component.ts

@@ -1,50 +1,68 @@
 import { Component, OnInit } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
-import { IonicModule, LoadingController, ToastController } from '@ionic/angular';
+import {
+  IonicModule,
+  LoadingController,
+  ToastController,
+} from '@ionic/angular';
 import * as Parse from 'parse';
 import * as Parse from 'parse';
 import { UploadComponent } from '../../../app/components/upload/upload.component';
 import { UploadComponent } from '../../../app/components/upload/upload.component';
+import { AuthService } from '../../../services/auth.service';
 
 
 @Component({
 @Component({
   selector: 'app-album',
   selector: 'app-album',
   templateUrl: './album.component.html',
   templateUrl: './album.component.html',
   styleUrls: ['./album.component.scss'],
   styleUrls: ['./album.component.scss'],
   standalone: true,
   standalone: true,
-  imports: [IonicModule,UploadComponent],
+  imports: [IonicModule, UploadComponent],
 })
 })
 export class AlbumComponent implements OnInit {
 export class AlbumComponent implements OnInit {
-
+  files: any = [];
+  profile?: Parse.Object;
+  loading:boolean = false
   constructor(
   constructor(
     public loadCtrl: LoadingController,
     public loadCtrl: LoadingController,
     public toastController: ToastController,
     public toastController: ToastController,
-  ) { }
-  files:any = [
-    {
-      url:'https://file-cloud.fmode.cn/Qje9D4bqol/20241108/sj1nf3055728156.png',
-      name:'头像.png',
-    },
-    {
-      url:'https://file-cloud.fmode.cn/Qje9D4bqol/20241108/rrh716055727927.png',
-      name:'头像.png',
-    },
-    {
-      url:'https://file-cloud.fmode.cn/Qje9D4bqol/20241108/cfr128055727439.png',
-      name:'头像.png',
-    },
-    {
-      url:'https://file-cloud.fmode.cn/Qje9D4bqol/20241108/sj1nf3055728156.png',
-      name:'头像.png',
-    },
-    {
-      url:'https://file-cloud.fmode.cn/Qje9D4bqol/20241108/cfr128055727439.png',
-      name:'头像.png',
-    },
-  ]
+    private authServ: AuthService
+  ) {}
   ngOnInit() {
   ngOnInit() {
-
+    console.log(Parse.User.current()?.toPointer());
+    this.getProfile();
+  }
+  async getProfile() {
+    let query = new Parse.Query('Profile');
+    query.equalTo('user', Parse.User.current()?.id);
+    query.notEqualTo('isDeleted', true);
+    query.select('attachment');
+    let p = await query.first();
+    this.profile = p;
+    this.files = p?.get('attachment')?.map((item: String) => {
+      return { url: item };
+    });
+    this.loading = true
   }
   }
-  onSave(e:any){
+  async onSave(e: any) {
     console.log(e);
     console.log(e);
+    let urls = e?.map((item: any) => item.url);
+    if (!this.profile?.id) {
+      let obj = Parse.Object.extend('Profile');
+      this.profile = new obj();
+    }
+    this.profile?.set('user', Parse.User.current()?.toPointer());
+    this.profile?.set('company', {
+      __type: 'Pointer',
+      className: 'Company',
+      objectId: this.authServ.company,
+    });
+    this.profile?.set('attachment', urls);
+    await this.profile?.save();
+    const toast = await this.toastController.create({
+      message: '保存成功',
+      color: 'success',
+      duration: 1000,
+    });
+    toast.present();
   }
   }
   back() {
   back() {
-    history.back()
+    history.back();
   }
   }
 }
 }

+ 1 - 1
projects/live-app/src/services/auth.service.ts

@@ -8,7 +8,7 @@ import { Router } from '@angular/router';
 })
 })
 export class AuthService {
 export class AuthService {
   isLoggedIn = false;
   isLoggedIn = false;
-  company:string = localStorage.getItem('company') || 'Qje9D4bqol'
+  company:string = 'Qje9D4bqol'
   redirectUrl: string = 'tabs';
   redirectUrl: string = 'tabs';
   constructor(private router: Router) {}
   constructor(private router: Router) {}
   authMobile(
   authMobile(