废话不多说,直接整篇拖!!!!!!!!!
包含父组件传参,自行删减。
<template>
<el-upload
:action="`url`"
class="upload-demo"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:limit="limitCount"
:on-success="handleAvatarSuccess"
:on-exceed="handleExceed"
:on-error="imgUploadError"
:on-change="handleChange"
:multiple="false"
:file-list="fileList"
:class="{hide:hideUpload}"
:disabled="disabled"
:before-upload="beforeAvatarUpload"
drag
accept=".png"
name="imgFile"
>
<i class="el-icon-upload" />
<div class="el-upload__text"><em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传{{ picWidth }}宽度*{{ picHeight }}高度的png文件,且不超过{{ limitSize }}m</div>
</el-upload>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'PicUploadSingle',
model: {
prop: 'value',
event: 'picChange'
},
props: {
value: {
required: true,
type: null
},
picSize: {
type: String,
default: 'original'
},
disabled: {
type: Boolean,
default: false
},
picWidth: {
type: String,
default: '200'
},
picHeight: {
type: String,
default: '200'
},
limitSize: {
type: String,
default: '2'
},
limitCount: {
type: Number,
default: 1
}
},
data() {
return {
hideUpload: false,
fileList: []
}
},
watch: {
value(newV) {
if (newV) {
this.fileList = [{ url: newV.fileUrl, name: this.value.fileName }]
}
}
},
created() {
console.log(this.value)
if (this.value) {
this.fileList.push({
url: this.value.fileUrl,
name: this.value.fileName
})
}
this.hideUpload = this.fileList.length >= this.limitCount
},
methods: {
...mapActions('global', ['setSingleUrl']),
...mapActions('organize', ['deletePic']),
handleRemove(file, fileList) {
this.hideUpload = fileList.length >= this.limitCount
console.log(file.url)
if (file.url) {
}
this.$emit('picChange', null)
},
handlePictureCardPreview(file) {
this.setSingleUrl(file.url)
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 10
const isJPG = file.type === 'image/png' ? file.type : false
if (!isJPG) {
this.$message.error(`上传图片格式为png`)
return
}
if (!isLt2M) {
this.$message.error(`上传图片大小不能超过 ${this.limitSize}M!`)
return
}
const _this = this
let imgWidth = ''
let imgHight = ''
const isSize = new Promise(function(resolve, reject) {
const _URL = window.URL || window.webkitURL
const img = new Image()
img.onload = function() {
imgWidth = img.width
imgHight = img.height
const valid = img.width === parseInt(_this.picWidth) && img.height === parseInt(_this.picHeight)
valid ? resolve() : reject()
}
img.src = _URL.createObjectURL(file)
}).then(() => {
return file
}, () => {
_this.$message.warning({ message: `上传文件的图片大小不合符标准,宽需要为${_this.picWidth}px,高需要为${_this.picHeight}px。当前上传图片的宽高分别为:${imgWidth}px和${imgHight}px` })
return Promise.reject()
})
return isSize
},
handleAvatarSuccess(res, f, fs) {
if (res.status !== 200) {
this.$message.error('上传失败!')
fs.pop()
} else {
this.$emit('picChange', res.data)
}
},
handleExceed() {
this.$message.error('只能上传单文件!')
},
imgUploadError(err) {
this.$message.error('上传失败!' + err)
this.$emit('picChange', null)
},
handleChange(files, fileList) {
this.hideUpload = fileList.length >= this.limitCount
}
}
}
</script>
<style lang="scss" scoped>
.upload-demo {
> > > .el-upload-dragger {
width: 100px;
height: 100px;
}
> > > .el-upload-dragger {
display: flex;
flex-direction: column;
justify-content: space-around;
}
> > > .el-upload-dragger .el-icon-upload {
margin: 0;
}
}
.hide .el-upload--picture-card {
display: none;
}
</style>