图片上传组件修改

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
@@ -44,12 +37,20 @@ export default {
     },
     defaultList: {
       type: Array,
-      default () {
+      default() {
         return []
       }
+    },
+    maxListSize: {
+      type: Number,
+      default: 1
+    },
+    accept: {
+      type: String,
+      default: null
     }
   },
-  data () {
+  data() {
     return {
       uploading: false,
       fileList: [],
@@ -58,42 +59,46 @@ export default {
     }
   },
   methods: {
-    previewFile (file) {
+    previewFile(file) {
       console.log(file)
     },
-    clear () {
+    clear() {
       this.fileList = []
     },
-    flush () {
+    flush() {
       this.clear()
       this.defaultList.forEach((file, index) => {
         this.fileList.push({
-            uid: index,
+          uid: index,
-            name: 'image.png',
+          name: 'image.png',
-            status: 'done',
+          status: 'done',
-            url: file
+          url: file
         })
       })
     },
-    handleRemove (file) {
+    handleRemove(file) {
       const index = this.fileList.indexOf(file)
       const newFileList = this.fileList.slice()
       newFileList.splice(index, 1)
       this.fileList = newFileList
     },
-    handleCancel () {
+    handleCancel() {
       this.previewVisible = false
     },
-    beforeUpload (file) {
+    beforeUpload(file) {
       this.fileList = [...this.fileList, file]
       return false
     },
-    async handlePreview (file) {
+    async handlePreview(file) {
       console.log(file)
+
+      if (!file.url && !file.preview)
+        file.preview = await getBase64(file.originFileObj);
+
       this.previewImage = file.url
       this.previewVisible = true
     },
-    submitUpload () {
+    submitUpload() {
       return new Promise((resolve, reject) => {
         const { fileList } = this
         if (fileList.length === 0) {