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.
59 lines
1.4 KiB
59 lines
1.4 KiB
<template>
|
|
<el-upload
|
|
class="img-upload"
|
|
ref="upload"
|
|
action="http://localhost:8443/api/covers"
|
|
with-credentials
|
|
:on-preview="handlePreview"
|
|
:on-remove="handleRemove"
|
|
:before-remove="beforeRemove"
|
|
:on-success="handleSuccess"
|
|
multiple
|
|
:limit="1"
|
|
:on-exceed="handleExceed"
|
|
:file-list="fileList">
|
|
<span>点击上传</span>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ImgUpload',
|
|
data () {
|
|
return {
|
|
fileList: [],
|
|
url: ''
|
|
}
|
|
},
|
|
methods: {
|
|
handleRemove (file, fileList) {
|
|
console.log(file, fileList)
|
|
},
|
|
handlePreview (file) {
|
|
console.log(file)
|
|
// 此处的 file 是整个文件
|
|
// console.log(file.response)
|
|
},
|
|
handleExceed (files, fileList) {
|
|
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
|
},
|
|
beforeRemove (file, fileList) {
|
|
return this.$confirm(`确定移除 ${file.name}？`)
|
|
},
|
|
handleSuccess (response) {
|
|
this.url = response
|
|
this.$emit('onUpload')
|
|
this.$message.warning('上传成功')
|
|
},
|
|
clear () {
|
|
this.$refs.upload.clearFiles()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.img-upload {
|
|
/*height: 200px;*/
|
|
}
|
|
</style>
|