You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.0 KiB
118 lines
3.0 KiB
<template>
|
|
<div>
|
|
<v-layout
|
|
ref="upload-area"
|
|
class="upload-area"
|
|
:style="{cursor: disabled ? 'not-allowed' : 'pointer'}"
|
|
align-center
|
|
justify-center
|
|
row
|
|
fill-height
|
|
@click="selectMedia"
|
|
>
|
|
<v-flex xs12 style="text-align: center">
|
|
<span v-if="disabled" />
|
|
<span v-else-if="!uploadOnGoing">Upload one media</span>
|
|
<span v-else>Uploading {{ percent }}%</span>
|
|
</v-flex>
|
|
</v-layout>
|
|
<div class="upload-note">
|
|
{{ note }}
|
|
</div>
|
|
<input ref="uploader" type="file" style="display:none" @change="onMediaSelected">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import cfg from '@/config'
|
|
|
|
export default {
|
|
model: { prop: 'mid', event: 'change' },
|
|
props: {
|
|
mid: { type: String, default: '' },
|
|
docColl: { type: String, default: '' },
|
|
docId: { type: String, default: '' },
|
|
docPath: { type: String, default: '' },
|
|
disabled: { type: Boolean, default: false }
|
|
},
|
|
data: () => ({
|
|
uploadOnGoing: false,
|
|
percent: 0,
|
|
selectedMedia: null,
|
|
mediaId: null,
|
|
mediaInfo: null
|
|
}),
|
|
computed: {
|
|
note () {
|
|
return this.mediaInfo ? this.mediaInfo.originalName : ''
|
|
}
|
|
},
|
|
watch: {
|
|
mid (val) {
|
|
if (!val) { return }
|
|
this.mediaId = val
|
|
this.updateBg()
|
|
}
|
|
},
|
|
mounted () {},
|
|
methods: {
|
|
updateBg () {
|
|
if (!this.mediaId) { return }
|
|
this.$refs['upload-area'].style.backgroundImage = `url('${cfg.serverUrl}/media/preview/${this.mediaId}?height=120×tamp=${(new Date()).getTime()}')`
|
|
this.$axios
|
|
.get(`${cfg.serverUrl}/api/media/${this.mediaId}`)
|
|
.then((res) => {
|
|
this.mediaInfo = res.data.data
|
|
})
|
|
},
|
|
onMediaSelected (event) {
|
|
this.selectedMedia = event.target.files[0]
|
|
this.uploadOnGoing = true
|
|
this.percent = 0
|
|
|
|
const formData = new FormData()
|
|
formData.append('media', this.selectedMedia, this.selectedMedia.name)
|
|
formData.append('docColl', this.docColl || '')
|
|
formData.append('docId', this.docId || '')
|
|
formData.append('docPath', this.docPath || '')
|
|
|
|
this.$axios
|
|
.post(`${cfg.serverUrl}/media/upload`, formData, {
|
|
onUploadProgress: (progressEvent) => {
|
|
this.percent = Math.ceil(progressEvent.loaded / progressEvent.total * 100)
|
|
}
|
|
})
|
|
.then((pRes) => {
|
|
this.uploadOnGoing = false
|
|
this.selectedMedia = null
|
|
this.mediaId = pRes.data.mediaId
|
|
this.$emit('change', this.mediaId)
|
|
this.updateBg()
|
|
})
|
|
.catch((pRes) => {
|
|
this.uploadOnGoing = false
|
|
this.selectedMedia = null
|
|
})
|
|
},
|
|
selectMedia () {
|
|
if (this.disabled) { return }
|
|
if (this.uploadOnGoing) { return }
|
|
this.$refs.uploader.click()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.upload-area {
|
|
height: 120px;
|
|
background: #CCC;
|
|
box-shadow: 0 0 8px #666 inset;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
.upload-note {
|
|
color: #AAA;
|
|
}
|
|
</style>
|