148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<template>
|
|
<div class="clearfix">
|
|
<a-upload
|
|
list-type="picture-card"
|
|
: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>
|
|
</a-upload>
|
|
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
|
<img alt="example" style="width: 100%" :src="previewImage" />
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Upload from 'ant-design-vue/lib/upload'
|
|
import 'ant-design-vue/lib/upload/style'
|
|
import { ossUpload } from '@/api/sys/oss'
|
|
import axios from 'axios'
|
|
import storage from 'store'
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
// function getBase64(file) {
|
|
// return new Promise((resolve, reject) => {
|
|
// const reader = new FileReader()
|
|
// reader.readAsDataURL(file)
|
|
// reader.onload = () => resolve(reader.result)
|
|
// reader.onerror = error => reject(error)
|
|
// })
|
|
// }
|
|
export default {
|
|
components: {
|
|
[Upload.name]: Upload
|
|
},
|
|
props: {
|
|
sourceId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
defaultList: {
|
|
type: Array,
|
|
default () {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
uploading: false,
|
|
fileList: [],
|
|
previewVisible: false,
|
|
previewImage: ''
|
|
}
|
|
},
|
|
methods: {
|
|
previewFile (file) {
|
|
console.log(file)
|
|
},
|
|
clear () {
|
|
this.fileList = []
|
|
},
|
|
flush () {
|
|
this.clear()
|
|
this.defaultList.forEach((file, index) => {
|
|
this.fileList.push({
|
|
uid: index,
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: file
|
|
})
|
|
})
|
|
},
|
|
handleRemove (file) {
|
|
const index = this.fileList.indexOf(file)
|
|
const newFileList = this.fileList.slice()
|
|
newFileList.splice(index, 1)
|
|
this.fileList = newFileList
|
|
},
|
|
handleCancel () {
|
|
this.previewVisible = false
|
|
},
|
|
beforeUpload (file) {
|
|
this.fileList = [...this.fileList, file]
|
|
return false
|
|
},
|
|
async handlePreview (file) {
|
|
console.log(file)
|
|
this.previewImage = file.url
|
|
this.previewVisible = true
|
|
},
|
|
submitUpload () {
|
|
return new Promise((resolve, reject) => {
|
|
const { fileList } = this
|
|
if (fileList.length === 0) {
|
|
resolve({})
|
|
} else {
|
|
const data = new FormData()
|
|
data.append('file', fileList[0])
|
|
data.append('sourceId', this.sourceId)
|
|
|
|
const header = {}
|
|
header['Content-Type'] = 'multipart/form-data'
|
|
header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
|
|
|
|
axios.post(ossUpload(), data, { headers: header }).then((res) => {
|
|
if (res.data.code === 200) {
|
|
resolve(res.data.url)
|
|
this.uploading = false
|
|
} else {
|
|
this.$message.error(res.data.msg)
|
|
this.uploading = false
|
|
}
|
|
}, (err) => {
|
|
reject(err)
|
|
this.uploading = false
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
/* you can make up upload button and sample style by using stylesheets */
|
|
/* .ant-upload-select-picture-card i {
|
|
font-size: 32px;
|
|
color: #999;
|
|
}
|
|
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
|
margin-top: 8px;
|
|
color: #666;
|
|
}
|
|
.ant-upload-list-picture-card .ant-upload-list-item{
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
.ant-upload.ant-upload-select-picture-card{
|
|
width: 90px;
|
|
height: 90px;
|
|
} */
|
|
</style>
|