class vue 添加图片_vue+element 添加图片组件
添加图片
效果图
微信截图_20200630144419.png
微信截图_20200630144532.png
由于该组件在页面中使用位置广泛，一但在dialog中使用便会发生错误，故未添加预览功能。
子组件
:action="`${this.$store.state.uploadBefore}/api-f/file/moreuploads?siteId=${ siteId }&userId=${ userId }`"
list-type="picture-card"
name="files"
:file-list="files"
:multiple="true"
:limit="maxCount"
:on-success="handleSuccess"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:disabled="disabled"
>
class="avatar-uploader"
:action="`${this.$store.state.uploadBefore}/api-f/file/moreuploads?siteId=${ siteId }&userId=${ userId }`"
name="files"
:show-file-list="false"
:on-success="handleSuccess"
:on-remove="handleRemove"
:disabled="disabled"
>
export default {
name: "UpImg",
props: {
value: {
type: String,
default: ""
},
maxCount: {
// 最大上传图片数量
type: Number,
default: 1
},
disabled: {
// 是否禁用上传组件
type: Boolean,
default: false
}
},
data() {
return {
siteId: null,
userId: null,
images: [],
files: [] // 用于图片回显使用
};
},
model: {
prop: "value",
event: "valChange"
},
watch: {
value(newVal) {
if (newVal && typeof newVal === "string") {
this.images = newVal.split(",");
if (this.maxCount > 1) {
// 回显图片
let files = [];
this.images.forEach(item => {
files.push({ url: item });
});
this.files = files;
}
} else {
this.images = [];
this.files = [];
}
},
images(newVal) {
this.$emit("valChange", this.images.join(","));
}
},
created() {
this.siteId = sessionStorage.getItem("siteId");
this.userId = sessionStorage.getItem("userId");
},
methods: {
/*
* 移除某张图片
* file 移除的图片
* fileList 剩余的图片列表
*/
handleRemove(file, fileList) {
this.images = [];
fileList.map(item => {
this.images.push(item.url);
});
},
/*
* 图片上传成功
* res 上传图片接口返回的数据
*/
handleSuccess(res) {
if (res.ret != 200) {
this.$message.error(res.msg);
} else {
if (this.maxCount > 1) {
this.images.push(...res.data);
} else {
this.images = res.data;
}
}
},
/*
* 图片上传超出数量
*/
handleExceed() {
this.$message({
message: "最多只能上传" + this.maxCount + "张图片",
type: "warning",
duration: 2000
});
}
}
};
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
父组件
添加文件
效果图
微信截图_20200703085740.png
使用方式同上，只是element组件换了一下
class="upload-demo"
:action="`${this.$store.state.uploadBefore}/api-f/file/moreuploads?siteId=${ siteId }&userId=${ userId }`"
name="files"
:limit="maxCount"
:file-list="fileList"
:on-change="handleChange"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:disabled="disabled"
>
{{ title }}
export default {
name: "UpFile",
props: {
value: {
type: Array,
default: []
},
maxCount: {
// 最大上传文件数量
type: Number,
default: 1
},
disabled: {
// 是否禁用上传组件
type: Boolean,
default: false
},
title: {
// 按钮文本
type: String,
default: '上传附件'
}
},
data() {
return {
siteId: null,
userId: null,
fileList: []
};
},
model: {
prop: "value",
event: "valChange"
},
watch: {
value(newVal) {
this.fileList = newVal;
},
fileList(newVal) {
this.$emit("valChange", this.fileList);
}
},
created() {
this.siteId = sessionStorage.getItem("siteId");
this.userId = sessionStorage.getItem("userId");
},
methods: {
/*
* 移除某张文件
* file 移除的文件
* fileList 剩余的文件列表
*/
handleRemove(file, fileList) {
this.fileList = fileList;
},
/*
* 文件上传
* res 上传文件接口返回的数据
*/
handleChange(file) {
console.log(file);
if (file.status == "success") {
if (file.response.ret != 200) {
this.$message.error(file.response.msg);
} else {
this.fileList.push({
name: file.name,
url: file.response.data[0]
});
}
}
},
/*
* 文件上传超出数量
*/
handleExceed() {
this.$message({
message: "最多只能上传" + this.maxCount + "件文件",
type: "warning",
duration: 2000
});
}
}
};
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}