图片上传组件修改
This commit is contained in:
parent
c55c81c701
commit
8458c5d9e8
|
@ -1,14 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="clearfix">
|
<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" />
|
<a-icon type="plus" />
|
||||||
<div class="ant-upload-text">上传</div>
|
<div class="ant-upload-text">上传</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -25,14 +18,14 @@ import { ossUpload } from '@/api/sys/oss'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import storage from 'store'
|
import storage from 'store'
|
||||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
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 {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
[Upload.name]: Upload
|
[Upload.name]: Upload
|
||||||
|
@ -44,12 +37,20 @@ export default {
|
||||||
},
|
},
|
||||||
defaultList: {
|
defaultList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default () {
|
default() {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
maxListSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
accept: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
uploading: false,
|
uploading: false,
|
||||||
fileList: [],
|
fileList: [],
|
||||||
|
@ -58,13 +59,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
previewFile (file) {
|
previewFile(file) {
|
||||||
console.log(file)
|
console.log(file)
|
||||||
},
|
},
|
||||||
clear () {
|
clear() {
|
||||||
this.fileList = []
|
this.fileList = []
|
||||||
},
|
},
|
||||||
flush () {
|
flush() {
|
||||||
this.clear()
|
this.clear()
|
||||||
this.defaultList.forEach((file, index) => {
|
this.defaultList.forEach((file, index) => {
|
||||||
this.fileList.push({
|
this.fileList.push({
|
||||||
|
@ -75,25 +76,29 @@ export default {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleRemove (file) {
|
handleRemove(file) {
|
||||||
const index = this.fileList.indexOf(file)
|
const index = this.fileList.indexOf(file)
|
||||||
const newFileList = this.fileList.slice()
|
const newFileList = this.fileList.slice()
|
||||||
newFileList.splice(index, 1)
|
newFileList.splice(index, 1)
|
||||||
this.fileList = newFileList
|
this.fileList = newFileList
|
||||||
},
|
},
|
||||||
handleCancel () {
|
handleCancel() {
|
||||||
this.previewVisible = false
|
this.previewVisible = false
|
||||||
},
|
},
|
||||||
beforeUpload (file) {
|
beforeUpload(file) {
|
||||||
this.fileList = [...this.fileList, file]
|
this.fileList = [...this.fileList, file]
|
||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
async handlePreview (file) {
|
async handlePreview(file) {
|
||||||
console.log(file)
|
console.log(file)
|
||||||
|
|
||||||
|
if (!file.url && !file.preview)
|
||||||
|
file.preview = await getBase64(file.originFileObj);
|
||||||
|
|
||||||
this.previewImage = file.url
|
this.previewImage = file.url
|
||||||
this.previewVisible = true
|
this.previewVisible = true
|
||||||
},
|
},
|
||||||
submitUpload () {
|
submitUpload() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const { fileList } = this
|
const { fileList } = this
|
||||||
if (fileList.length === 0) {
|
if (fileList.length === 0) {
|
||||||
|
|
Loading…
Reference in New Issue