https://github.com/rymcu/nebula/issues/75

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

pages/portfolio/post/_portfolio_id.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row class="wrapper">
     <el-col v-if="isAuthor">
-      <el-col v-if="isEdit" style="margin-bottom: 1rem;">
+      <el-col style="margin-bottom: 1rem;" v-if="isEdit">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
           </el-breadcrumb-item>
@@ -15,23 +15,28 @@
         作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点
       </el-col>
       <el-col>
-        <el-form :model="portfolio" :rules="rules" ref="topic" label-width="100px">
+        <el-form :model="portfolio" :rules="rules" label-width="100px" ref="topic">
           <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"
-                  :src="headImgUrl"
+                  :autoCrop="autoCrop"
+                  :autoCropArea="1"
+                  :fixedNumber="[1,2]"
                   :checkCrossOrigin="false"
                   :checkOrientation="false"
-                  :imgStyle="{width: '480px', height: '480px'}"
-                  :autoCropArea="1"
-                  :autoCrop="autoCrop"
+                  :imgStyle="{'width': '200px'}"
+                  :src="headImgUrl"
                   preview=".preview"
+                  ref="cropper"
+                  v-if="headImgUrl"
                 />
               </el-col>
               <el-col :span="24" style="margin-top: 2rem;">
@@ -51,18 +56,18 @@
               </el-col>
               <el-col :span="24" style="margin-top: 2rem;">
                 <el-upload
-                  class="avatar-uploader"
-                  action=""
+                  :before-upload="beforeAvatarUpload"
+                  :http-request="requestUpload"
                   :multiple="true"
                   :show-file-list="false"
-                  :on-success="handleAvatarSuccess"
-                  :before-upload="beforeAvatarUpload">
+                  action=""
+                  class="avatar-uploader">
                   <div>
-                    <el-button type="primary" round plain>上传</el-button>
+                    <el-button plain round type="primary">上传</el-button>
                   </div>
                 </el-upload>
-                <el-button style="margin-top: 1rem;" type="primary" round plain @click.prevent="reset">重置</el-button>
-                <el-button type="primary" round plain @click.prevent="cropImage">裁剪</el-button>
+                <el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置</el-button>
+                <el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
                 <el-col>
                   <span style="color: red;padding-right: 5px;">*</span>
                   <span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
@@ -71,24 +76,21 @@
             </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 v-if="isEdit" @click="deletePortfolio" :loading="loading">删除</el-button>
-            <el-button v-if="isEdit" @click="updatePortfolio" :loading="loading">更新</el-button>
-            <el-button v-else @click="updatePortfolio" :loading="loading">提交</el-button>
+            <el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
+            <el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
+            <el-button @click="updatePortfolio" v-else>提交</el-button>
           </el-form-item>
         </el-form>
       </el-col>
     </el-col>
-    <el-col v-else class="text-center">
+    <el-col class="text-center" v-else>
       <el-alert
-        title="用户无权限"
-        type="warning"
+        :closable="false"
         center
         show-icon
-        :closable="false">
+        title="用户无权限"
+        type="warning">
       </el-alert>
     </el-col>
   </el-row>
@@ -171,6 +173,10 @@ export default {
     }
   },
   methods: {
+    // 覆盖默认的上传行为
+    requestUpload(e) {
+      console.log('e', e)
+    },
     _initEditor(data) {
       let _ts = this;
 
@@ -257,18 +263,18 @@ export default {
         placeholder: data.placeholder,
       })
     },
-    handleAvatarSuccess(res) {
-      let _ts = this;
-      if (res && res.data && res.data.url) {
-        let portfolio = _ts.portfolio;
-        portfolio.headImgUrl = res.data.url;
-        portfolio.headImgType = '0';
-        _ts.$set(_ts, 'portfolio', portfolio);
-        _ts.$set(_ts, 'headImgUrl', res.data.url);
-      } else {
-        _ts.$message.error('上传失败!');
-      }
-    },
+    // handleAvatarSuccess(res) {
+    //   let _ts = this;
+    //   if (res && res.data && res.data.url) {
+    //     let portfolio = _ts.portfolio;
+    //     portfolio.headImgUrl = res.data.url;
+    //     portfolio.headImgType = '0';
+    //     _ts.$set(_ts, 'portfolio', portfolio);
+    //     _ts.$set(_ts, 'headImgUrl', res.data.url);
+    //   } else {
+    //     _ts.$message.error('上传失败!');
+    //   }
+    // },
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg';
       const isPNG = file.type === 'image/png';
@@ -282,18 +288,30 @@ export default {
         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);
-        _ts.$refs.cropper.replace(this.result);
+        if ((_ts.portfolio.headImgUrl || undefined) != undefined) {
+          _ts.$message.success('图片上传成功，可自定义裁剪');
+        } else {
+          _ts.$message.warning('图片上传失败，请重传');
+        }
       }
     },
     async updatePortfolio() {
+      //headImgUrl
       let _ts = this;
       _ts.$set(_ts, 'loading', true);
       let id = _ts.idPortfolio;
@@ -302,6 +320,12 @@ export default {
       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) {
@@ -437,7 +461,7 @@ export default {
 </script>
 
 <style lang="less">
-  @import "~vditor/src/assets/less/index.less";
+@import "~vditor/src/assets/less/index.less";
 
 .preview-area {
   width: 16rem;