🐛 修复作品集提交裁剪问题

修复作品集提交裁剪问题

config/api.config.js

@@ -12,11 +12,11 @@ const apisMap = {
     VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
   },
   test: {
-    FE: 'https://test.rymcu.com',
+    FE: 'https://rymcu.com',
-    BASE: 'https://test.rymcu.com',
+    BASE: 'https://rymcu.com',
     CDN: 'https://static.rymcu.com',
     PROXY: 'https://static.rymcu.com/proxy',
-    SOCKET: 'https://test.rymcu.com/wss',
+    SOCKET: 'https://rymcu.com/wss',
     GRAVATAR: 'https://static.rymcu.com/avatar',
     VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
     VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'

nuxt.config.js

@@ -58,8 +58,8 @@ export default {
     {src: '~/plugins/axios'},
     {src: '~/plugins/element-ui'},
     {src: '~/plugins/vditor', ssr: false},
-    {src: '~/plugins/vue-sse'}
+    {src: '~/plugins/vue-sse'},
-    // {src: '~/plugins/vue-cropper', ssr: false}
+    {src: '~/plugins/vue-cropper', ssr: false}
   ],
   /*
   ** Nuxt.js dev-modules

package.json

@@ -13,6 +13,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@babel/types": "^7.21.2",
     "@chenfengyuan/vue-qrcode": "^1.0.2",
     "@nuxtjs/auth-next": "^5.0.0-1667386184.dfbbb54",
     "@nuxtjs/axios": "^5.13.1",
@@ -27,7 +28,7 @@
     "save-svg-as-png": "^1.4.17",
     "simple-icons": "^6.23.0",
     "vditor": "^3.8.18",
-    "vue-cropperjs": "^4.2.0",
+    "vue-cropper": "^0.6.2",
     "vue-sse": "^2.5.2",
     "vuejs-avataaars": "^4.0.1"
   },

pages/admin/tag/post/_tag_id.vue

@@ -120,8 +120,7 @@
 <script>
 import Vue from "vue";
 import {mapState} from 'vuex';
-import VueCropper from "vue-cropperjs";
+import VueCropper from "vue-cropper";
-import 'cropperjs/dist/cropper.css';
 import apiConfig from '~/config/api.config';
 
 export default {

pages/admin/topic/post/_topic_id.vue

@@ -118,8 +118,7 @@
 <script>
 import Vue from 'vue';
 import {mapState} from 'vuex';
-import VueCropper from 'vue-cropperjs';
+import VueCropper from 'vue-cropper';
-import 'cropperjs/dist/cropper.css';
 import apiConfig from '~/config/api.config';
 
 export default {

pages/portfolio/post/_portfolio_id.vue

@@ -31,41 +31,50 @@
         </el-col>
         <el-col :span="6">
           <el-card>
-            <vue-cropper
+            <div>
-              :aspect-ratio="1"
+              <div class="cropperBox">
-              :autoCrop="autoCrop"
+                <vue-cropper
-              :autoCropArea="1"
+                  :aspect-ratio="1"
-              :fixedNumber="[1,2]"
+                  :autoCrop="autoCrop"
-              :checkCrossOrigin="false"
+                  :autoCropArea="1"
-              :checkOrientation="false"
+                  :fixedNumber="[1,2]"
-              :imgStyle="{'width': '200px'}"
+                  :checkCrossOrigin="false"
-              :img="headImgUrl"
+                  :checkOrientation="false"
-              preview=".preview"
+                  :img="headImgUrl"
-              ref="cropper"
+                  preview=".preview"
-              v-if="headImgUrl"
+                  ref="cropper"
-            />
+                  @realTime="realTime"
-
+                />
-            <div class="preview preview-large"/>
-            <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
-            <div class="portfolioDescription">
-              {{ portfolio.portfolioDescription }}
-            </div>
-            <el-upload
-              :before-upload="beforeAvatarUpload"
-              :multiple="true"
-              :show-file-list="false"
-              action=""
-              class="avatar-uploader">
-              <div>
-                <el-button plain round type="primary">上传</el-button>
               </div>
-            </el-upload>
+              <div class="cropperBox">
-            <el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置
+                <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
-            </el-button>
+                     style="overflow:hidden;margin: 0 auto">
-            <el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
+                  <img :src="cropImg.url" :style="cropImg.img">
-            <p style="color: red;padding-right: 5px;">*
+                </div>
-              <span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
+              </div>
-            </p>
+
+              <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
+              <div class="portfolioDescription">
+                {{ portfolio.portfolioDescription }}
+              </div>
+
+              <div class="button_box">
+
+                <el-upload
+                  :before-upload="beforeAvatarUpload"
+                  :multiple="true"
+                  :show-file-list="false"
+                  action=""
+                  class="avatar-uploader">
+                  <div>
+                    <el-button plain round type="primary">上传</el-button>
+                  </div>
+                </el-upload>
+
+                <el-button @click="reset" style="margin-left: 10px" plain round type="primary">重置
+                </el-button>
+              </div>
+            </div>
           </el-card>
         </el-col>
       </el-row>
@@ -85,8 +94,6 @@
 <script>
 import Vue from 'vue';
 import {mapState} from 'vuex';
-import VueCropper from 'vue-cropperjs';
-import 'cropperjs/dist/cropper.css';
 import apiConfig from '~/config/api.config';
 
 export default {
@@ -103,9 +110,7 @@ export default {
         .catch(err => error({statusCode: 404}))
     ])
   },
-  components: {
+
-    VueCropper
-  },
   computed: {
     ...mapState({
       portfolioDetail: state => state.portfolio.detail.data,
@@ -160,6 +165,9 @@ export default {
     }
   },
   methods: {
+    realTime(data) {
+      this.cropImg = data
+    },
     _initEditor(data) {
       //初始化
       let _ts = this;
@@ -256,7 +264,7 @@ export default {
       if (res && res.data && res.data.url) {
         let portfolio = _ts.portfolio;
         portfolio.headImgUrl = res.data.url;
-        portfolio.headImgType = '0';
+        // portfolio.headImgType = '0';
         _ts.$set(_ts, 'portfolio', portfolio);
         _ts.$set(_ts, 'headImgUrl', res.data.url);
       } else {
@@ -284,40 +292,45 @@ export default {
       reader.readAsDataURL(file);
       reader.onload = function () {
         _ts.$set(_ts, 'headImgUrl', this.result);
-        _ts.$refs.cropper?.replace(this.result);
+        // _ts.$refs.cropper?.replace(this.result);
       }
     },
     async updatePortfolio() {
       //headImgUrl
       let _ts = this;
-      this.cropImage()
+      // this.cropImage()
       _ts.$set(_ts, 'loading', true);
       let id = _ts.idPortfolio;
       let portfolioDescription = _ts.contentEditor.getValue();
       let portfolioDescriptionHtml = _ts.contentEditor.getHTML();
       let data = _ts.portfolio;
-      data.portfolioDescription = portfolioDescription;
+      this.$refs.cropper.getCropData(img => {
-      data.portfolioDescriptionHtml = portfolioDescriptionHtml;
+        data.headImgUrl = img
-      if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
+        data.portfolioDescription = portfolioDescription;
-        this.$message.error('请输入必填信息');
+        data.portfolioDescriptionHtml = portfolioDescriptionHtml;
-        return false
+        // data.headImgUrl = _ts.headImgUrl
-      }
+        data.headImgType = '0';
-      let title = id ? '更新' : '添加';
+        if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
-      _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
+          this.$message.error('请输入必填信息');
-        if (res && res.message) {
+          return false
-          _ts.$message.error(res.message);
-        } else {
-          _ts.$message({
-            type: 'success',
-            message: title + '成功!'
-          });
-          _ts.$set(_ts, 'notificationFlag', false);
-          _ts.$router.push({
-            path: '/portfolio/' + res.idPortfolio
-          })
         }
-        _ts.$set(_ts, 'loading', false)
+        let title = id ? '更新' : '添加';
-      }).catch(error => _ts.$set(_ts, 'loading', false))
+        _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
+          if (res && res.message) {
+            _ts.$message.error(res.message);
+          } else {
+            _ts.$message({
+              type: 'success',
+              message: title + '成功!'
+            });
+            _ts.$set(_ts, 'notificationFlag', false);
+            _ts.$router.push({
+              path: '/portfolio/' + res.idPortfolio
+            })
+          }
+          _ts.$set(_ts, 'loading', false)
+        }).catch(error => _ts.$set(_ts, 'loading', false))
+      })
     },
     deletePortfolio() {
       let _ts = this;
@@ -346,24 +359,9 @@ export default {
       });
     },
     reset() {
-      this.$refs.cropper.reset();
+      this.headImgUrl = ''
+      // this.$refs.cropper.clearCrop()
     },
-    // get image data for post processing, e.g. upload or setting image src
-    cropImage() {
-      let _ts = this;
-      try {
-        _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
-        let portfolio = _ts.portfolio;
-        portfolio.headImgUrl = _ts.cropImg;
-        portfolio.headImgType = '0';
-        _ts.$set(_ts, 'portfolio', portfolio);
-        _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
-        _ts.$message.success('已裁剪 !');
-      } catch (e) {
-        _ts.$message.error('图片获取失败 !');
-        return;
-      }
-    }
   },
   beforeRouteLeave(to, from, next) {
     let _ts = this;
@@ -415,8 +413,8 @@ export default {
 
     let portfolioContent = '';
     if (_ts.idPortfolio) {
-      this.isEdit = true
+      // this.isEdit = true
-      // _ts.$set(_ts, 'isEdit', true);
+      _ts.$set(_ts, 'isEdit', true);
       _ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
       _ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
       if (!this.isEdit) {
@@ -443,6 +441,10 @@ export default {
 <style lang="less">
 @import "~vditor/src/assets/less/index.less";
 
+.button_box {
+  display: flex;
+}
+
 .wrapper_portfolio {
   width: 100%;
   max-width: 100%;
@@ -478,10 +480,16 @@ export default {
 
 .preview-large {
   width: 100%;
-  height: 480px;
+  height: 380px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   background-color: #ffffff;
   overflow: hidden;
+  border: 1px solid red;
+
+  > img {
+    display: block;
+    margin: 0 auto;
+  }
 }
 
 .portfolioDescription {
@@ -496,4 +504,13 @@ export default {
   -webkit-line-clamp: 3;
   word-break: break-all;
 }
+
+.cropperBox {
+  width: 100%;
+  height: 300px;
+  margin-bottom: 20px;
+  border: 1px solid #F2F6FC;
+}
+
+
 </style>

pages/user/settings/avatar.vue

@@ -75,8 +75,7 @@
 import {mapState} from 'vuex';
 import Avataaars from 'vuejs-avataaars';
 import saveSvg from 'save-svg-as-png';
-import VueCropper from 'vue-cropperjs';
+import VueCropper from 'vue-cropper';
-import 'cropperjs/dist/cropper.css';
 
 const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
 export default {

plugins/vue-cropper.js

@@ -1,4 +1,4 @@
+import vueCropper from 'vue-cropper';
 import Vue from 'vue';
-import VueCropper from 'vue-cropperjs';
+
-import 'cropperjs/dist/cropper.css';
+Vue.use(vueCropper);
-Vue.component('vue-cropper', VueCropper);