[WHAT] User Profile Uplaod Avatar [WHY] 開發 ShowEasy 前台

FrontEnd/components/user/cropImageDialog.vue

@@ -35,6 +35,11 @@ export default {
   components: {
     CircleStencil, Cropper
   },
+  data() {
+    return {
+      
+    };
+  },
   props: {
     isCropImageDialogActive: {
       type: Boolean,
@@ -49,27 +54,43 @@ export default {
   },
   methods: {
     cancelCropImage() {
-      const deleteFile = this.cropImagePreview.split('/')
-      const filename = deleteFile.pop()
-      this.$axios.delete(`/users/images?filename=${filename}`)
-      .then(response => {})
-      .catch(error => console.log(error))
+      // const deleteFile = this.cropImagePreview.split('/')
+      // const filename = deleteFile.pop()
+      // this.$axios.delete(`/users/images?filename=${filename}`)
+      // .then(response => {})
+      // .catch(error => console.log(error))
       this.$emit('close-crop-dialog')
     },
     cropImage() {
-      const result = this.$refs.cropper.getResult()
-      const resultSplit = result.image.src.split('/')
-      const fileDetails = resultSplit[resultSplit.length-1].split('.')
-      const fileURL = result.canvas.toDataURL('image/'+fileDetails[1])
-      const file = this.dataURLtoFile(fileURL,fileDetails[0]+'.'+fileDetails[1])
-      const payload = new FormData()
-      payload.append('file',file)
-      this.$axios.post('/users/images',payload)
-        .then(response => {
-          const pictureURL = response.data.image.url
-          this.$emit('upload-image-success',pictureURL)
-        })
-        .catch(error => console.log(error))
+      // const result = this.$refs.cropper.getResult()
+      // console.log(result);
+      // const resultSplit = result.image.src.split('/')
+      // console.log(resultSplit);
+      // const fileDetails = resultSplit[resultSplit.length-1].split('.')
+      // const fileURL = result.canvas.toDataURL('image/'+fileDetails[1])
+      // const file = this.dataURLtoFile(fileURL,fileDetails[0]+'.'+fileDetails[1])
+      // const payload = new FormData()
+      // payload.append('file',file)
+      this.$emit('upload-image-success')
+      // this.$axios
+      //     .post(
+      //       `/trending/api/Members/UploadAvatar`
+      //     )
+      //     .then((response) => {
+      //     //console.log(JSON.stringify(response));
+      //     if(response && response.data && response.data.DATA && response.data.DATA.rel){
+      //       let data = response.data.DATA.rel
+      //       if(data){
+      //         const pictureURL = data;
+      //         console.log("change pic:" + pictureURL);
+      //         this.$emit('upload-image-success');
+      //       }
+      //     }
+      //   })
+      //   .catch((error) => {
+      //     console.log(error);
+      //   });
+
     },
     dataURLtoFile(dataurl, filename) {
       let arr = dataurl.split(','),

FrontEnd/pages/user/editPersonalInfo.vue

@@ -53,7 +53,7 @@
               {{ $t("userProfile.uploadPicture") }}
             </button>
             
-          <input type="file" class="d-none" ref="uploader" @change="getNewPicture" />
+          <input type="file" class="d-none" ref="uploader" @change="getNewPicture($event)" />
 
 
           <!-- <input type="file" class="d-none" ref="uploader" @change="userPictureUpload" /> -->
@@ -271,14 +271,9 @@ export default {
       },
       errors: null,
       userPic: {},
-      payload:{
-        picName: "",
-        picSize: "",
-        picType: "",
-        picPath:"",
-        mozFullPath:"",
-      },
+      payload:[],
       dialCode:"",
+      test:[],
     };
   },
   created() {
@@ -443,43 +438,31 @@ export default {
 
     },
     getNewPicture(e) {
-
+      this.payload = new FormData();
+      this.payload.append("file", e.target.files[0]);
       const path = URL.createObjectURL(e.target.files[0]);
       this.cropImagePreview = path ;
-      console.log("image:" + this.cropImagePreview);
       this.isCropImageDialogActive = !this.isCropImageDialogActive;
       
-
     },
 
     userPictureUpload(e) {
-      const fileSize = (e.target.files[0].size / 1024 / 1024).toFixed(1); 
-        if (fileSize >= 2) {
-          this.fileTooBig = !this.fileTooBig;
-        } else {
-        this.$axios
+      //const fileSize = (e.target.files[0].size / 1024 / 1024).toFixed(1); 
+      this.$axios
           .post(
-            `/trending/api/Members/UploadAvatar`
+            `/trending/api/Members/UploadAvatar`, this.payload
           )
           .then((response) => {
-          //console.log(JSON.stringify(response));
-          if(response && response.data && response.data.DATA && response.data.DATA.rel){
-            let data = response.data.DATA.rel
-            if(data){
-              this.cropImagePreview = data;
+            if(response && response.data){
+
+              this.isCropImageDialogActive = !this.isCropImageDialogActive;
+              this.patchUserData();
+
             }
-          }
         })
         .catch((error) => {
           console.log(error);
         });
-        this.isCropImageDialogActive = !this.isCropImageDialogActive;
-        }
-
-      
-
-      
-      
     },
     fetchCountry() {
       this.$axios