前言
封装的图片上传组件
<template>
<div class="public-upload-image">
<el-upload
ref="uploadImage"
action="https://upload.qiniup.com"
:on-success="handleAvatarSuccess"
:before-upload="beforeUpload"
:data="upToken"
:file-list="fileList2"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-preview="handlePreview"
list-type="picture"
:limit="limit"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,建议不超过500kb</div>
</el-upload>
</div>
</template>
<script>
/**
* 上传图片组件
* @backType 返回类型 1=字符串/2=数组
* 示例'https://www.baidu.com/Fh36U,www.baidu.com/Fl5ln'
* 或者['www.baidu.com/Fh36','www.baidu.com/Fl5']
* @value 回显值,与backType同类型
* @limit 上传数量 默认1
*/
import { uploadToken } from 'service/upload'
export default {
name: 'public-upload-image',
data() {
return {
fileList2: [],
upToken: null,
imgRemoteUrl: null,
domain: 'www.baidu.com'
}
},
props: {
backType: { type: Number, default: 1 },
value: { type: String, default: '' },
limit: { type: Number, default: 1 }
},
components: {},
computed: {},
created() {
},
onload() { },
onShow() { },
watch: {
// 回显数据
value(newVal, oldVal) {
if (newVal && (newVal !== '' || newVal.length > 0)) {
if (this.backType === 1) {
let arr = newVal.split(',')
this.fileList2 = []
arr.forEach(item => {
this.fileList2.push({ name: item, url: item })
})
} else if (this.backType === 2) {
this.fileList2 = []
newVal.forEach(item => {
this.fileList2.push({ name: item, url: item })
})
}
} else {
this.$refs['uploadImage'].clearFiles()
}
}
},
methods: {
// 设置返回数据
setBackData(list) {
debugger
let urls
if (list && list.length > 0) {
if (this.backType === 1) {
urls = ''
list.forEach(item => {
urls += item.url + ','
})
urls = urls.slice(0, urls.length - 1)
} else if (this.backType === 2) {
urls = []
list.forEach(item => {
urls.push(item.url)
})
}
} else {
urls = null
}
return urls
},
// 删除图片
handleRemove(file, fileList) {
this.fileList2 = fileList
this.$emit('remove', this.setBackData(this.fileList2))
},
// 复制地址
handlePreview(file) {
// 创建'虚拟'DOM
const input = document.createElement('input')
document.body.appendChild(input)
input.setAttribute('value', file.url)
input.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
this.$message({
type: 'success',
message: '当前图片地址复制成功!'
})
}
// 删除虚拟DOM
document.body.removeChild(input)
},
// 上传成功
handleAvatarSuccess(res, file, fileList) {
debugger
this.imgRemoteUrl = this.domain + res.key
this.fileList2.push({
name: this.imgRemoteUrl,
url: this.imgRemoteUrl
})
this.$emit('success', this.setBackData(this.fileList2))
},
// 文件超出
handleExceed(files, fileList) {
if (this.fileList2.length === this.limit) {
this.$message.warning(`当前限制上传图片个数:${fileList.length}`)
}
},
// 上传之前
beforeUpload(file) {
if (!this.upToken || this.upToken === '') {
return this._getToken()
}
},
// 获取token 1=私有附件/2=公开附件
_getToken(type = 2) {
return uploadToken(type).then(res => {
console.log(res.resdata.uptoken)
this.upToken = {
token: res.resdata.uptoken
}
})
}
}
}
</script>
<style lang="less" scoped>
</style>
调用
ps:我已经把它注册为全局组件,所以不需要再引用
<public-upload-image
@success="(val)=>{form.resource=val}"
@remove="(val)=>{form.resource=val}"
:value="form.resource"
/>