<template>
<div>
<el-upload multiple :limit="5" :action="imgUploadUrl" list-type="picture-card"
:headers="headers" :on-remove="handleRemove" :data="importData"
:on-success="onSuccess" ref="files" :file-list="huixianArr"
:on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
:on-exceed="onExceed" :on-change="handleEditChange"
:class="{ hide: hideUploadBtn }">
<i class="el-icon-plus"></i>
</el-upload>
<!-- 预览图片 -->
<el-dialog :visible.sync="dialogVisible" :title="dialogImageTitle"
append-to-body top="62px">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
data(){
return{
imglist: [],
huixianArr: [],
dialogImageUrl: "",
imgUploadUrl: `${base.prodBaseUrl}/file/upload`,
headers: {
Authorization: "Bearer " + sessionStorage.getItem("access_token"),
},
importData: {
type: "AG",
},
dialogImageTitle: "",
dialogVisible: false,
hideUploadBtn: false,
}
},
methods:{
// 图片上传成功回调
onSuccess(res) {
if (res.code === 200) {
this.imglist.push(res.data[0].path);
}
},
// 删除图片
handleRemove(file, fileList) {
let temp = [];
fileList.forEach((element) => {
temp.push(element.url);
});
this.imglist = temp;
this.hideUploadBtn = temp.length >= 5;
},
// 最多上传6张图,超过时隐藏上传按钮
handleEditChange(file, fileList) {
this.hideUploadBtn = fileList.length >= 5;
},
// 预览图片
handlePictureCardPreview(file) {
this.dialogImageTitle = file.name;
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
onExceed(file, fileList) {
this.$message.warning("最多上传5张图片!");
},
beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
if (!isLt2M) {
this.$message.warning("上传图片大小不能超过 2MB!");
}
return isLt2M;
},
}
</script>
<style lang="scss" scoped>
// 图片数量等于限制数量时隐藏上传组件
::v-deep.hide {
.el-upload--picture-card {
display: none !important;
}
}
</style>
el-upload上传图片以及数量大小限制
最新推荐文章于 2024-06-13 08:58:58 发布