图片上传组件修改

src/components/ImageUpload/index.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="clearfix">
-    <a-upload
+    <a-upload list-type="picture-card" :multiple="false" :file-list="fileList" :accept="accept" :before-upload="beforeUpload" :preview-file="previewFile" :remove="handleRemove" @preview="handlePreview">
-      list-type="picture-card"
+      <div v-if="fileList.length < maxListSize">
-      :multiple="false"
-      :file-list="fileList"
-      :before-upload="beforeUpload"
-      :preview-file="previewFile"
-      :remove="handleRemove"
-      @preview="handlePreview">
-      <div v-if="fileList.length < 1">
         <a-icon type="plus" />
         <div class="ant-upload-text">上传</div>
       </div>
@@ -25,14 +18,14 @@ import { ossUpload } from '@/api/sys/oss'
 import axios from 'axios'
 import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
-// function getBase64(file) {
+function getBase64(file) {
-//   return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
-//     const reader = new FileReader()
+    const reader = new FileReader()
-//     reader.readAsDataURL(file)
+    reader.readAsDataURL(file)
-//     reader.onload = () => resolve(reader.result)
+    reader.onload = () => resolve(reader.result)
-//     reader.onerror = error => reject(error)
+    reader.onerror = error => reject(error)
-//   })
+  })
-// }
+}
 export default {
   components: {
     [Upload.name]: Upload
@@ -47,6 +40,14 @@ export default {
       default() {
         return []
       }
+    },
+    maxListSize: {
+      type: Number,
+      default: 1
+    },
+    accept: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -90,6 +91,10 @@ export default {
     },
     async handlePreview(file) {
       console.log(file)
+
+      if (!file.url && !file.preview)
+        file.preview = await getBase64(file.originFileObj);
+
       this.previewImage = file.url
       this.previewVisible = true
     },