class vue 添加图片_vue+element 添加图片组件
添加圖片
效果圖
微信截圖_20200630144419.png
微信截圖_20200630144532.png
由于該組件在頁(yè)面中使用位置廣泛，一但在dialog中使用便會(huì)發(fā)生錯(cuò)誤，故未添加預(yù)覽功能。
子組件
: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: {
// 最大上傳圖片數(shù)量
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 上傳圖片接口返回的數(shù)據(jù)
*/
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;
}
}
},
/*
* 圖片上傳超出數(shù)量
*/
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: {
// 最大上傳文件數(shù)量
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 上傳文件接口返回的數(shù)據(jù)
*/
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]
});
}
}
},
/*
* 文件上傳超出數(shù)量
*/
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;
}
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的class vue 添加图片_vue+element 添加图片组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 现有法律解决不了？AIGC版权归属难题：
- 下一篇： 跨平台开发框架 Qt 6.5 LTS 版