废话不多说,直接整篇拖！！！！！！！！！
包含父组件传参,自行删减。
<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"dragaccept=".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,// limitCount: 1,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.limitCountconsole.log(file.url)if (file.url) {// this.deletePic({// fileUrls: [file.url]// })}this.$emit('picChange', null)},// 预览handlePictureCardPreview(file) {this.setSingleUrl(file.url)},// 上传前类型检测beforeAvatarUpload(file) {// 文件上传之前调用做一些拦截限制const isLt2M = file.size / 1024 / 1024 < 10const isJPG = file.type === 'image/png' ? file.type : falseif (!isJPG) {this.$message.error(`上传图片格式为png`)return}if (!isLt2M) {this.$message.error(`上传图片大小不能超过 ${this.limitSize}M!`)return}const _this = thislet imgWidth = ''let imgHight = ''const isSize = new Promise(function(resolve, reject) {const _URL = window.URL || window.webkitURLconst img = new Image()img.onload = function() {imgWidth = img.widthimgHight = img.heightconst 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>
