图片裁剪

package.json

@@ -20,6 +20,7 @@
     "@nuxt/typescript-runtime": "^1.0.0",
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/proxy": "^1.3.1",
+
     "@nuxtjs/router": "^1.5.0",
     "aliyun-upload-vod": "^1.0.5",
     "babel-plugin-component": "^1.1.1",

pages/frontend/learn/add.vue

@@ -31,15 +31,15 @@
           <el-main>
             <el-form v-if="active==1" style="margin-top: 60px" ref="form" label-width="80px">
               <el-form-item label="课程名称">
-                <el-input v-model="saleInfo.title"></el-input>
+                <el-input show-word-limit maxlength="15" v-model="saleInfo.title"></el-input>
               </el-form-item>
               <el-form-item label="概述">
-                <el-input type="textarea" v-model="saleInfo.desc"></el-input>
+                <el-input show-word-limit maxlength="15" type="textarea" v-model="saleInfo.desc"></el-input>
               </el-form-item>
               <el-form-item label="列表封面">
                 <el-upload
                   class="avatar-uploader"
-                  action="/upload_image"
+                  action="/"
                   :show-file-list="false"
                   :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,1)">
                   <img v-if="saleInfo.img_icon" :src="saleInfo.img_icon" class="avatar">
@@ -195,6 +195,35 @@
         </el-container>
       </el-container>
     </el-container>
+
+    <!-- vueCropper 剪裁图片实现-->
+    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
+      <div class="cropper-content">
+        <div class="cropper" style="text-align:center">
+          <vueCropper
+            ref="cropper"
+            :img="option.img"
+            :outputSize="option.size"
+            :outputType="option.outputType"
+            :info="true"
+            :full="option.full"
+            :canMove="option.canMove"
+            :canMoveBox="option.canMoveBox"
+            :original="option.original"
+            :autoCrop="option.autoCrop"
+            :fixed="option.fixed"
+            :fixedNumber="option.fixedNumber"
+            :centerBox="option.centerBox"
+            :infoTrue="option.infoTrue"
+            :fixedBox="option.fixedBox"
+          ></vueCropper>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="finish">确认</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -238,6 +267,26 @@
           video_img:"",
           ewm:"",
         },
+        dialogVisible: false,
+        // 裁剪组件的基础配置option
+        option: {
+          img: '', // 裁剪图片的地址
+          info: true, // 裁剪框的大小信息
+          outputSize: 1, // 裁剪生成图片的质量
+          outputType: 'jpeg', // 裁剪生成图片的格式
+          canScale: false, // 图片是否允许滚轮缩放
+          autoCrop: true, // 是否默认生成截图框
+          // autoCropWidth: 300, // 默认生成截图框宽度
+          // autoCropHeight: 200, // 默认生成截图框高度
+          fixedBox: true, // 固定截图框大小 不允许改变
+          fixed: true, // 是否开启截图框宽高固定比例
+          fixedNumber: [310, 175], // 截图框的宽高比例
+          full: true, // 是否输出原图比例的截图
+          canMoveBox: false, // 截图框能否拖动
+          original: false, // 上传图片按照原始比例渲染
+          centerBox: false, // 截图框是否被限制在图片里面
+          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+        },
         teacherInfo:{
           img:""
         },
@@ -265,6 +314,19 @@
       time_type(zj_id,kc_id,type){
         this.video_list[zj_id].list[kc_id].time_type=type;
       },
+      // 点击裁剪，这一步是可以拿到处理后的地址
+      finish() {
+        this.$refs.cropper.getCropBlob((data) => {
+          //上传阿里云服务器
+          this.$axios.$post('/upload_image', { file:data}).then(res => {
+            if (res.status === 1) {
+              this.saleInfo.img_icon=filename;
+            }
+          }).catch(err => {
+
+          })
+        })
+      },
       add_new_zj(){
         this.zj_disabled=true;
         var new_object={"id":"","video_name":"","list":[{"id":"","kc_id":"","progress":0,"video_name":"","checked":false,"time_type":0,"ymd":"","his":""}]};
@@ -348,7 +410,17 @@
       upload_img_success(res, file, fileList,type){
         if(type==1)
         {
-           this.saleInfo.img_icon=res.filename;
+          let filename=res.filename;
+          const isLt5M = file.size / 1024 / 1024 < 5
+          if (!isLt5M) {
+            this.$message.error('上传文件大小不能超过 5MB!')
+            return false
+          }
+          // 上传成功后将图片地址赋值给裁剪框显示图片
+          this.$nextTick(() => {
+            this.option.img =filename
+            this.dialogVisible = true
+          })
         }
         else if(type==2)
         {
@@ -612,6 +684,19 @@
     -moz-appearance: textfield !important;
   }
   .el-form-item__content .content-field span{line-height: normal}
+  .cropper-content{
+    width: 100%;
+    height: 300px;
+  }
+  .cropper {
+    width: 100%;
+    height: 240px;
+  }
+  .btnGroup{
+    float: right;
+    margin-top: 10px;
+    margin-right: 15px;
+  }
 </style>
 <style lang="scss">
   // 编辑器样式

pages/sign/new.vue

@@ -10,7 +10,7 @@
     <works></works>
     <social></social>
     <el-button
-      v-if="this.userInfo.realname_re == '3'||this.userInfo.realname_re=='0'"
+      v-if="this.userInfo.realnamshowToaste_re == '3'||this.userInfo.realname_re=='0'"
       @click="signNow"
       class="sign-btn"
     >申请签约开发者

plugins/nuxtAxios.js

@@ -41,8 +41,8 @@ export default function ({
     console.log("stringify req env............",process.env.NODE_ENV);
     if(process.env.NODE_ENV=="development" && config.baseURL=="http://local.proginn.com")
     {
-      config.baseURL="https://dev.test.proginn.com";
-      config.headers.host="dev.test.proginn.com";
+     // config.baseURL="https://dev.test.proginn.com";
+      //config.headers.host="dev.test.proginn.com";
     }
 
     console.log("After, making request to ", config.url, config.baseURL);