公用组件
// UploadPhoto.vue
<template>
<div class="UploadPhoto">
<el-upload
class="upload-demo"
:action="imgData.url"
:headers="imgData.headers"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:before-remove="beforeHandleRemove"
:on-success="success"
:file-list="fileList"
:on-exceed="exceed"
:limit="imgData.limit || 1"
:data="{fileType:imgData.fileType}"
list-type="picture"
>
<el-button size="small" icon="el-icon-upload2">点击上传</el-button>
<div slot="tip" class="el-upload__tip">{{imgData.propose}}</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal="false">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
export default {
props: { imgData: { type: Object, default: {} } },
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
fileList: [],
imageUrl: [],
};
},
watch: {
imgData: {
deep:true,
handler: function(value) {
this.fileList = this.imgData.fileList
}
},
},
created() {
this.fileList = this.imgData.fileList;
},
methods: {
handleRemove(file, fileList) {},
beforeHandleRemove(file, fileList) {
return this.$request
.ossDelete({ fileName: file.name, fileType: this.imgData.fileType })
.then((res) => {
this.deletList(file.name);
});
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 超出设定最大值
exceed() {
this.$message.warning(`最多只能上传${this.imgData.limit}个文件`);
},
// 上传成功
success(file) {
debugger
this.fileList.forEach((item,i)=>{
if(item instanceof Object){
this.fileList[i] = item.url
return
}
})
this.fileList.push(file.data.url);
this.$emit("toParent", this.fileList);
},
deletList(name) {
this.fileList.forEach((item, i) => {
if (item.indexOf(name) != -1) {
this.fileList.splice(i, 1);
}
});
},
},
};
</script>
<style lang='less'>
.UploadPhoto {
.el-upload--picture-card {
height: 148px;
width: 148px;
border: none;
}
.el-upload-dragger {
height: 148px;
width: 148px;
}
.el-upload-list__item {
line-height: 0;
height: unset;
}
.el-button--small {
font-size: 14px;
}
}
</style>
父组件
<UploadPhoto @toParent="getMag1" :imgData="imgUpload"></UploadPhoto>
data()
// 网站图标上传路径
imgUpload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: `${process.env.VUE_APP_BASE_API}/system/oss/ossUp`,
limit: 1,
fileType: "web-icon",
propose: "建议尺寸为180*60,支持扩展名:.png,大小不超过5M",
},
method{
getMag1(msg) {
this.form.iconUrl = msg;
},
}