Revert "fix-上传后图片可以直接提交"

This reverts commit 7eee6fd3933cd57c9812aa9590186acd3806eb36.

config/api.config.js

@@ -3,7 +3,7 @@ import {NODE_ENV} from '../environment'
 const apisMap = {
   development: {
     FE: 'http://localhost:3000',
-    BASE: 'https://test.rymcu.com',
+    BASE: 'http://localhost:8099/forest',
     CDN: '',
     PROXY: '/proxy',
     SOCKET: 'http://localhost:3000/ws',

nuxt.config.js

@@ -114,7 +114,7 @@ export default {
   proxy: [  //proxy配置
     ['/api', {
       target: apiConfig.BASE,  //api请求路径
-      pathRewrite: {'^/api': isDevMode ? '/api' : '/api'}  //重定向请求路径，防止路由、api路径的冲突
+      pathRewrite: {'^/api': isDevMode ? '/api/v1' : '/api'}  //重定向请求路径，防止路由、api路径的冲突
     }],
     ['/ws', {
       target: apiConfig.BASE  //api请求路径

pages/portfolio/post/_portfolio_id.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row class="wrapper">
     <el-col v-if="isAuthor">
-      <el-col style="margin-bottom: 1rem;" v-if="isEdit">
+      <el-col v-if="isEdit" style="margin-bottom: 1rem;">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
           </el-breadcrumb-item>
@@ -15,28 +15,23 @@
         作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点
       </el-col>
       <el-col>
-        <el-form :model="portfolio" :rules="rules" label-width="100px" ref="topic">
+        <el-form :model="portfolio" :rules="rules" ref="topic" label-width="100px">
           <el-form-item label="作品集名称" prop="portfolioTitle">
             <el-input v-model="portfolio.portfolioTitle"></el-input>
           </el-form-item>
-          <el-form-item label="作品集介绍" prop="portfolioDescription">
-            <div id="contentEditor"></div>
-          </el-form-item>
           <el-form-item>
             <el-row>
               <el-col :span="24">
                 <vue-cropper
+                  ref="cropper"
                   :aspect-ratio="1 / 1"
-                  :autoCrop="autoCrop"
+                  :src="headImgUrl"
-                  :autoCropArea="1"
-                  :fixedNumber="[1,2]"
                   :checkCrossOrigin="false"
                   :checkOrientation="false"
-                  :imgStyle="{'width': '200px'}"
+                  :imgStyle="{width: '480px', height: '480px'}"
-                  :src="headImgUrl"
+                  :autoCropArea="1"
+                  :autoCrop="autoCrop"
                   preview=".preview"
-                  ref="cropper"
-                  v-if="headImgUrl"
                 />
               </el-col>
               <el-col :span="24" style="margin-top: 2rem;">
@@ -56,18 +51,18 @@
               </el-col>
               <el-col :span="24" style="margin-top: 2rem;">
                 <el-upload
-                  :before-upload="beforeAvatarUpload"
+                  class="avatar-uploader"
-                  :http-request="requestUpload"
+                  action=""
                   :multiple="true"
                   :show-file-list="false"
-                  action=""
+                  :on-success="handleAvatarSuccess"
-                  class="avatar-uploader">
+                  :before-upload="beforeAvatarUpload">
                   <div>
-                    <el-button plain round type="primary">上传</el-button>
+                    <el-button type="primary" round plain>上传</el-button>
                   </div>
                 </el-upload>
-                <el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置</el-button>
+                <el-button style="margin-top: 1rem;" type="primary" round plain @click.prevent="reset">重置</el-button>
-                <el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
+                <el-button type="primary" round plain @click.prevent="cropImage">裁剪</el-button>
                 <el-col>
                   <span style="color: red;padding-right: 5px;">*</span>
                   <span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
@@ -76,34 +71,37 @@
             </el-row>
           </el-form-item>
 
+          <el-form-item label="作品集介绍" prop="portfolioDescription">
+            <div id="contentEditor"></div>
+          </el-form-item>
           <el-form-item class="text-right">
-            <el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
+            <el-button v-if="isEdit" @click="deletePortfolio" :loading="loading">删除</el-button>
-            <el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
+            <el-button v-if="isEdit" @click="updatePortfolio" :loading="loading">更新</el-button>
-            <el-button @click="updatePortfolio" v-else>提交</el-button>
+            <el-button v-else @click="updatePortfolio" :loading="loading">提交</el-button>
           </el-form-item>
         </el-form>
       </el-col>
     </el-col>
-    <el-col class="text-center" v-else>
+    <el-col v-else class="text-center">
       <el-alert
-        :closable="false"
+        title="用户无权限"
+        type="warning"
         center
         show-icon
-        title="用户无权限"
+        :closable="false">
-        type="warning">
       </el-alert>
     </el-col>
   </el-row>
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
-  import VueCropper from 'vue-cropperjs';
+import VueCropper from 'vue-cropperjs';
-  import 'cropperjs/dist/cropper.css';
+import 'cropperjs/dist/cropper.css';
-  import apiConfig from '~/config/api.config';
+import apiConfig from '~/config/api.config';
 
-  export default {
+export default {
   name: "PortfolioPost",
   validate({params, store}) {
     if (typeof params.portfolio_id === 'undefined') {
@@ -173,10 +171,6 @@
     }
   },
   methods: {
-      // 覆盖默认的上传行为
-      requestUpload(e) {
-        console.log('e', e)
-      },
     _initEditor(data) {
       let _ts = this;
 
@@ -263,18 +257,18 @@
         placeholder: data.placeholder,
       })
     },
-      // handleAvatarSuccess(res) {
+    handleAvatarSuccess(res) {
-      //   let _ts = this;
+      let _ts = this;
-      //   if (res && res.data && res.data.url) {
+      if (res && res.data && res.data.url) {
-      //     let portfolio = _ts.portfolio;
+        let portfolio = _ts.portfolio;
-      //     portfolio.headImgUrl = res.data.url;
+        portfolio.headImgUrl = res.data.url;
-      //     portfolio.headImgType = '0';
+        portfolio.headImgType = '0';
-      //     _ts.$set(_ts, 'portfolio', portfolio);
+        _ts.$set(_ts, 'portfolio', portfolio);
-      //     _ts.$set(_ts, 'headImgUrl', res.data.url);
+        _ts.$set(_ts, 'headImgUrl', res.data.url);
-      //   } else {
+      } else {
-      //     _ts.$message.error('上传失败!');
+        _ts.$message.error('上传失败!');
-      //   }
+      }
-      // },
+    },
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg';
       const isPNG = file.type === 'image/png';
@@ -288,30 +282,18 @@
         return false;
       }
       this.fileToBase64(file);
-
+      return false;
-
-        // this.$set(_ts, 'headImgUrl', res.data.url);
     },
     fileToBase64(file) {
-        console.log('我执行了？')
       let _ts = this;
       let reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = function () {
-          let portfolio = _ts.portfolio;
-          portfolio.headImgUrl = this.result;
-          portfolio.headImgType = '0';
-          _ts.$set(_ts, 'portfolio', portfolio);
         _ts.$set(_ts, 'headImgUrl', this.result);
-          if ((_ts.portfolio.headImgUrl || undefined) != undefined) {
+        _ts.$refs.cropper.replace(this.result);
-            _ts.$message.success('图片上传成功，可自定义裁剪');
-          } else {
-            _ts.$message.warning('图片上传失败，请重传');
-          }
       }
     },
     async updatePortfolio() {
-        //headImgUrl
       let _ts = this;
       _ts.$set(_ts, 'loading', true);
       let id = _ts.idPortfolio;
@@ -320,12 +302,6 @@
       let data = _ts.portfolio;
       data.portfolioDescription = portfolioDescription;
       data.portfolioDescriptionHtml = portfolioDescriptionHtml;
-        if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
-          this.$message.error('请输入必填信息');
-          return false
-        }
-
-
       let title = id ? '更新' : '添加';
       _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
         if (res && res.message) {
@@ -457,45 +433,45 @@
       value: portfolioContent
     });
   }
-  }
+}
 </script>
 
 <style lang="less">
   @import "~vditor/src/assets/less/index.less";
 
-  .preview-area {
+.preview-area {
   width: 16rem;
-  }
+}
 
-  .preview-area p {
+.preview-area p {
   font-size: 1.25rem;
-  }
+}
 
-  .preview-area p:last-of-type {
+.preview-area p:last-of-type {
   margin-top: 1rem;
-  }
+}
 
-  .crop-placeholder {
+.crop-placeholder {
   width: 36px;
   height: 36px;
   background: #ccc;
-  }
+}
 
-  .cropped-image img {
+.cropped-image img {
   max-width: 100%;
-  }
+}
 
-  .img-cropper {
+.img-cropper {
   width: 480px;
   min-height: 480px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
-  }
+}
 
-  .preview-large {
+.preview-large {
   width: 100%;
   height: 480px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   background-color: #ffffff;
   overflow: hidden;
-  }
+}
 </style>