咨询详情上传图片裁剪测试；

assets/css/consult/create.scss

@@ -311,3 +311,53 @@
         }
     }
 }
+// 图片裁剪
+.cropper-title {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+    font-size: 20px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: center;
+    color: #222222;
+}
+.cropper-content {
+    width: 100%;
+    height: auto;
+    position: relative;
+    .cropper-container {
+        width: 410px;
+        height: 280px;
+    }
+    .action-wrapper {
+        width: 100%;
+        margin-top: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .confirm-btn {
+            width: 170px;
+            height: 46px;
+            background: #308eff;
+            border-radius: 6px;
+            margin-right: 12px;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            font-weight: 500;
+            color: #ffffff;
+            border: none !important;
+        }
+        .cancel-btn {
+            width: 170px;
+            height: 46px;
+            background: #f4f5f9;
+            border-radius: 6px;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            font-weight: 500;
+            color: #666666;
+            border: none !important;
+        }
+    }
+}

nuxt.config.js

@@ -172,6 +172,10 @@ module.exports = {
     {
       src: 'plugins/vueLazyLoad',
       ssr: false
+    },
+    {
+      src: '~/plugins/cropper',
+      ssr: false
     }
   ],
   /*

package.json

@@ -43,6 +43,7 @@
     "vconsole": "^3.3.4",
     "vue-aliplayer": "^0.0.8",
     "vue-awesome-swiper": "^3.1.3",
+    "vue-cropper": "^0.5.8",
     "vue-observe-visibility": "^0.4.6",
     "vue-quill-editor": "^3.0.6",
     "vue-touch": "^2.0.0-beta.4",

pages/frontend/consult/create.vue

@@ -130,13 +130,23 @@
             </div>
             <!-- 图片 -->
             <div class="image-field">
-                <div class="field-name"><span class="required">*</span> 话题介绍图</div>
-                <multi-uploader
+                <div class="field-name"><span class="required">*</span> 个人封面图片</div>
+                <!-- <multi-uploader
                     class="consult-image-uploader"
                     :showTips="false"
                     :limit="1"
-                    v-model="imageList"></multi-uploader>
-                <div class="upload-tips">请上传话题介绍图，至多一张
+                    v-model="imageList"></multi-uploader> -->
+                <el-upload
+                    action=""
+                    class="consult-image-uploader"
+                    accept=".jpg,.jpeg,.png,.JPG,.PNG,.JPEG"
+                    drag 
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    :on-change='changeUpload'>
+                    <i class="el-icon-plus"></i>
+                </el-upload>
+                <div class="upload-tips">请上传个人封面图片，至多一张
                     建议比例16:9（如：1920*1080、800*450）支持J(E)PG、PNG格式，小于5MB
                 </div>
             </div>
@@ -154,6 +164,37 @@
                     @click="handlePcreate">存草稿</el-button>
             </div>
         </div>
+        <!-- 图片裁剪 dialog -->
+        <el-dialog
+            :visible.sync="isShowCropperDialog"
+            width="450px">
+            <div class="cropper-title" slot="title">图片裁剪</div>
+            <div class="cropper-content">
+                <div class="cropper-container">
+                    <vueCropper
+                        ref="cropper"
+                        :img="cropperOption.img"
+                        :canScale="false"
+                        :info="false"
+                        autoCrop
+                        fixed
+                        :fixedNumber="[16, 9]"
+                        :fixedBox="false"
+                        :canMove="false"
+                        centerBox></vueCropper>
+                </div>
+                <div class="action-wrapper">
+                    <el-button
+                        :loading="saveImageIsLoading"
+                        class="confirm-btn"
+                        @click="handleSaveCropperImage">保存</el-button>
+                    <el-button
+                        :disabled="saveImageIsLoading"
+                        class="cancel-btn"
+                        @click="handleCancelCropperImage">取消</el-button>
+                </div>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -161,9 +202,14 @@
 import { mapState } from "vuex";
 import editor from "@/components/editor";
 import multiUploader from '@/components/multi-uploader';
+// import VueCropper from 'vue-cropper'
 
 // 查看示例 uid
 const exampleUid = process.env.NODE_ENV == "development" ? '680581' : '583073'
+// if(process.browser) {
+//     vueCropper = require('vue-cropper')
+//     Vue.use(vueCropper.default)
+// }
 
 export default {
     head: {
@@ -171,7 +217,8 @@ export default {
     },
     components: {
         editor,
-        multiUploader
+        multiUploader,
+        // VueCropper
     },
     data () {
         return {
@@ -206,7 +253,12 @@ export default {
             imageList: [], // 用户上传的图片
             publishIsLoading: false,
             pcreateIsLoading: false,
-            exampleUid
+            exampleUid,
+            isShowCropperDialog: false,
+            cropperOption: {
+                img: ''
+            },
+            saveImageIsLoading: false
         }
     },
     computed: {
@@ -687,6 +739,32 @@ export default {
         handleDeleteSavedTime (index) {
             this.savedTime.splice(index, 1)
             this.time.splice(index, 1, { stime: '', etime: '', sError: false, eError: false, error: '' })
+        },
+        changeUpload (file, fileList) {
+            console.log(file, fileList)
+            var url = window.URL.createObjectURL(file.raw);
+            this.cropperOption.img = url
+            this.isShowCropperDialog = true
+        },
+        handleSaveCropperImage () {
+            const self = this
+            this.saveImageIsLoading = true
+
+            this.$refs.cropper.getCropBlob(data => {
+                const formData = new FormData();
+                formData.append("file", data);
+
+                self.$axios.$post(`https://dev.test.proginn.com/upload_image`, formData, {
+                    headers: { "Content-Type": "multipart/form-data" }
+                }).then(res => {
+                    console.log(res)
+                }).then(() => {
+                    self.saveImageIsLoading = false
+                })
+            })
+        },
+        handleCancelCropperImage () {
+            this.isShowCropperDialog = false
         }
     }
 }
@@ -727,6 +805,15 @@ input[type="number"]{
         height: 168.75px !important;
         line-height: 168.75px !important;
     }
+    .el-upload {
+        .el-upload-dragger {
+            width: 300px !important;
+            height: 168.75px !important;
+            display: flex !important;
+            align-items: center;
+            justify-content: center;
+        }
+    }
     .el-upload--picture-card {
         width: 300px !important;
         height: 168.75px !important;

plugins/cropper.js

@@ -0,0 +1,3 @@
+import vueCropper from 'vue-cropper';
+import Vue from 'vue';
+Vue.use(vueCropper);

yarn.lock

@@ -10442,6 +10442,10 @@ vue-client-only@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/vue-client-only/download/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
 
+vue-cropper@^0.5.8:
+  version "0.5.8"
+  resolved "https://registry.npmmirror.com/vue-cropper/download/vue-cropper-0.5.8.tgz#df5c8b923bfc2f1db5280054f73640b0c6a75a8d"
+
 vue-github-badge@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/vue-github-badge/download/vue-github-badge-1.0.1.tgz#dff7ce07320e64a218edf106b15a43176ec06106"