图片裁切

src/components/PictureCropper.vue

@@ -16,10 +16,19 @@
         />
 
         <div class="btns">
-            <van-button type="primary" plain @click="cancel">取消</van-button>
+            <van-button type="primary" plain @click="cancel(true)">取消</van-button>
             <van-button type="primary" @click="getResult"> 确认</van-button>
         </div>
     </van-overlay>
+    <van-image-preview class="cropPreview" v-model:show="showPreview" :onClose="cancel" :images="imgs">
+        <template v-slot:cover>
+            <div class="btn-list" @click.stop="">
+                <van-button type="primary" plain @click="cancel(true)">取消</van-button>
+                <van-button v-if="!isGif" type="primary" plain @click="edit">编辑</van-button>
+                <van-button type="primary" @click="sure"> 确认</van-button>
+            </div>
+        </template>
+    </van-image-preview>
 </template>
 
 <script>
@@ -30,15 +39,48 @@ export default {
         return {
             show: false,
             pic: '',
-            result: {}
+            result: {},
+            imgs: [],
+            showPreview: false,
+            file: null,
+            next: false
         };
     },
+    computed: {
+        isGif() {
+            return this.file && this.file.file.type === 'image/gif';
+        }
+    },
     methods: {
-        init(img = '') {
+        init(img = '', file) {
             this.pic = img;
+            this.imgs = [img];
+            this.file = file;
+            this.showPreview = true;
+            this.next = false;
+        },
+        edit() {
+            this.next = true;
+            this.showPreview = false;
             this.show = true;
         },
-        cancel() {
+        sure() {
+            this.next = true;
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.updateFile(this.file).then(img => {
+                this.$toast.clear();
+                this.showPreview = false;
+                this.$emit('updateImg', img);
+            });
+        },
+        cancel(finish = false) {
+            if (this.next && finish !== true) {
+                return;
+            }
+            this.showPreview = false;
             this.show = false;
             this.$emit('updateImg', '');
         },
@@ -60,15 +102,20 @@ export default {
             this.result.dataURL = base64;
             this.result.blobURL = URL.createObjectURL(blob);
             console.log(this.result);
-            this.updateFile(base64).then(img => {
-                this.$toast.clear();
-                this.show = false;
-                this.$emit('updateImg', img);
-            });
+            this.updateFile2(base64)
+                .then(img => {
+                    this.$toast.clear();
+                    this.show = false;
+                    this.$emit('updateImg', img);
+                })
+                .catch(e => {
+                    this.$toast('图片太大，上传失败');
+                    this.cancel(true);
+                });
             // 隐藏裁切弹窗
             // this.isShowDialog = false;
         },
-        updateFile(base64) {
+        updateFile2(base64) {
             const formData = new FormData();
             formData.append('base64', base64);
             return http.axios.post('/upload/base64', formData).then(res => {
@@ -109,4 +156,22 @@ export default {
 /deep/.cropper-point {
     background-color: @prim;
 }
+.btn-list {
+    .flex();
+    padding: 9px 16px;
+    justify-content: space-between;
+    .bottom(9px);
+    background-color: #222426;
+}
+</style>
+
+<style lang="less">
+.cropPreview {
+    .van-image-preview__cover {
+        z-index: 20;
+        bottom: 0;
+        top: auto;
+        right: 0;
+    }
+}
 </style>

src/views/star/Create.vue

@@ -74,7 +74,7 @@
                 <template #label>
                     <div class="title">
                         <span>上传星图</span>
-                        <span>建议1:1大小，图片不大于250KB</span>
+                        <span>建议1:1大小,小于1MB,gif图片不可编辑</span>
                     </div>
                 </template>
                 <template #input>
@@ -85,6 +85,7 @@
                         v-model="form.pic"
                         :after-read="afterRead"
                         preview-size="100"
+                        :before-read="beforeRead"
                     />
                 </template>
             </van-field>
@@ -172,7 +173,8 @@ export default {
         };
         const cropperRef = ref(null);
         const afterRead = (file, e) => {
-            cropperRef.value.init(file.content);
+            console.log(file)
+            cropperRef.value.init(file.content, file);
             file.status = 'uploading';
             file.name = file.file.name;
             file.type = file.file.type;
@@ -194,7 +196,7 @@ export default {
         });
 
         //步骤
-        const step = ref(0);
+        const step = ref(1);
         //步骤名称
         const steps = ref(['销毁藏品', '上传星图', '星图铸造', '提交审核']);