上传图片功能修改

src/components/ImageUpload/index.vue

@@ -2,10 +2,10 @@
   <div class="component-upload-image">
     <ImageCropperModal
       :visible="cropperVisible"
-      :url="file"
+      :url="fileUrl"
       :auto-crop-width="autoCropWidth"
       :auto-crop-height="autoCropHeight"
-      @cancel="cropperVisible = false"
+      @cancel="onConcel"
       @confirm="onConfirm"
     />
     <el-upload
@@ -30,8 +30,8 @@
         || number >= limit}"
     >
       <i slot="default" class="el-icon-plus" />
-      <div slot="file" class="customer-upload-area">
-        <el-image :ref="file.url" class="el-upload-list__item-thumbnail customer-upload-error" :src="file.url" :preview-src-list="[file.url]">
+      <div slot="file" slot-scope="{file}" class="customer-upload-area">
+        <el-image v-show="fileList.length > 0" :ref="file.url" class="el-upload-list__item-thumbnail customer-upload-error" :src="file.url" :preview-src-list="[file.url]">
           <div slot="error" class="image-slot">
             <i class="el-icon-picture-outline" />
             <div>加载失败</div>
@@ -120,7 +120,7 @@ export default {
       },
       autoCropWidth: '400', // 要裁剪的宽
       autoCropHeight: '400', // 要裁剪的高
-      file: '',
+      fileUrl: '',
       fileName: '', // 存放文件名
       cropperVisible: false, // 控制弹窗打开关闭
       number: 0,
@@ -183,7 +183,7 @@ export default {
       const reader = new FileReader()
       reader.onload = () => {
         // 把Array Buffer转化为blob 如果是base64不需要
-        this.file = typeof reader.result === 'object' ? window.URL.createObjectURL(new Blob([reader.result]))
+        this.fileUrl = typeof reader.result === 'object' ? window.URL.createObjectURL(new Blob([reader.result]))
           : reader.result
       }
       // 转化为base64
@@ -229,6 +229,10 @@ export default {
         this.handleUploadError(err)
       })
     },
+    onConcel(file) {
+      this.cropperVisible = false
+      this.$refs.imageUpload.handleRemove(file)
+    },
     // 上传前loading加载
     handleBeforeUpload(file) {
       console.log('图片file---,', file.name)
@@ -347,17 +351,17 @@ export default {
 
 // .el-upload--picture-card 控制加号部分
 ::v-deep.hide .el-upload--picture-card {
-  display: none;
+    display: none;
 }
 // 去掉动画效果
 ::v-deep .el-list-enter-active,
 ::v-deep .el-list-leave-active {
-  transition: all 0s;
+    transition: all 0s;
 }
 
 ::v-deep .el-list-enter, .el-list-leave-active {
-  opacity: 0;
-  transform: translateY(0);
+    opacity: 0;
+    transform: translateY(0);
 }
 ::v-deep .el-upload-list--picture-card {
   line-height: 0;

src/components/imageCropper/index.vue

@@ -58,7 +58,9 @@ export default {
   },
   methods: {
     onCancel() {
-      this.$emit('cancel')
+      this.$refs.imageCropper.getCropBlob((blob) => {
+        this.$emit('cancel', blob)
+      })
     },
     onConfirm() {
       this.$refs.imageCropper.getCropBlob((blob) => {