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.1 KiB
118 lines
3.1 KiB
<template>
|
|
<div>
|
|
<el-upload
|
|
:action="uploadAction"
|
|
:headers="accessToken"
|
|
:data="dataObj"
|
|
list-type="picture"
|
|
:multiple="false"
|
|
:show-file-list="showFileList"
|
|
:file-list="fileList"
|
|
:before-upload="beforeUpload"
|
|
:on-remove="handleRemove"
|
|
:on-success="handleUploadSuccess"
|
|
:on-preview="handlePreview"
|
|
>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
<img width="100%" :src="fileList[0].url" alt="">
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { policy } from '@/api/oss'
|
|
import { getStorage } from '@/utils/auth.js'
|
|
|
|
export default {
|
|
name: 'SingleUpload',
|
|
props: {
|
|
value: String
|
|
},
|
|
data() {
|
|
return {
|
|
uploadAction: process.env.VUE_APP_BASE_API + '/file/upload',
|
|
accessToken: null,
|
|
dataObj: {
|
|
policy: '',
|
|
signature: '',
|
|
key: '',
|
|
ossaccessKeyId: '',
|
|
dir: '',
|
|
host: ''
|
|
},
|
|
dialogVisible: false
|
|
}
|
|
},
|
|
computed: {
|
|
imageUrl() {
|
|
return this.value
|
|
},
|
|
imageName() {
|
|
if (this.value != null && this.value !== '') {
|
|
return this.value.substr(this.value.lastIndexOf('/') + 1)
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
fileList() {
|
|
return [{
|
|
name: this.imageName,
|
|
url: this.imageUrl
|
|
}]
|
|
},
|
|
showFileList: {
|
|
get: function() {
|
|
return this.value !== null && this.value !== '' && this.value !== undefined
|
|
},
|
|
set: function(newValue) {
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.accessToken = {
|
|
token: getStorage()
|
|
}
|
|
},
|
|
methods: {
|
|
emitInput(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
handleRemove(file, fileList) {
|
|
this.emitInput('')
|
|
},
|
|
handlePreview(file) {
|
|
this.dialogVisible = true
|
|
},
|
|
beforeUpload(file) {
|
|
// const _self = this
|
|
// return new Promise((resolve, reject) => {
|
|
// policy().then(response => {
|
|
// _self.dataObj.policy = response.data.policy;
|
|
// _self.dataObj.signature = response.data.signature;
|
|
// _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
|
|
// _self.dataObj.key = response.data.dir + '/${filename}';
|
|
// _self.dataObj.dir = response.data.dir;
|
|
// _self.dataObj.host = response.data.host;
|
|
// resolve(true)
|
|
// }).catch(err => {
|
|
// console.log(err)
|
|
// reject(false)
|
|
// })
|
|
// })
|
|
},
|
|
handleUploadSuccess(res, file) {
|
|
this.showFileList = true
|
|
this.fileList.pop()
|
|
// this.fileList.push({ name: file.name, url: this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name })
|
|
this.fileList.push({ name: file.name, url: res.data.fullUrl })
|
|
this.emitInput(this.fileList[0].url)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
</style>
|
|
|
|
|