first commit
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
:style="{'--box-width': width + 'px', '--box-height': height + 'px'}"
|
||||
multiple
|
||||
:action="FILE_UPLOAD_ADDRESS"
|
||||
list-type="picture-card"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
ref="imageUpload"
|
||||
:on-remove="handleDelete"
|
||||
:file-list="fileList"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:class="{hidePic: this.fileList.length >= this.limit}"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||
请上传
|
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
|
||||
的文件
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "ImageUpload",
|
||||
props: {
|
||||
value: [String, Array],
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["png", "jpg", "jpeg"],
|
||||
},
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 100
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
hideUpload: false,
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
let fff = []
|
||||
fff = Array.isArray(val) ? [...val] : [val]
|
||||
this.fileList = fff.map(v => {
|
||||
return {
|
||||
name: v,
|
||||
url: CREATE_PREVIEW_URL(v)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示提示
|
||||
showTip() {
|
||||
return this.isShowTip && (this.fileType || this.fileSize);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 上传前loading加载
|
||||
handleBeforeUpload(file) {
|
||||
let isImg = false;
|
||||
if (this.fileType.length) {
|
||||
let fileExtension = "";
|
||||
if (file.name.lastIndexOf(".") > -1) {
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||
}
|
||||
isImg = this.fileType.some(type => {
|
||||
if (file.type.indexOf(type) > -1) return true;
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
isImg = file.type.indexOf("image") > -1;
|
||||
}
|
||||
|
||||
if (!isImg) {
|
||||
this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
|
||||
return false;
|
||||
}
|
||||
if (this.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||
if (!isLt) {
|
||||
this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 文件个数超出
|
||||
handleExceed() {
|
||||
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||
},
|
||||
// 上传成功回调
|
||||
handleUploadSuccess(res, file) {
|
||||
if (res.code === 0) {
|
||||
if (this.limit === 1) {
|
||||
this.$emit("input", res.data.filepath)
|
||||
} else {
|
||||
if (this.value && Array.isArray(this.value)) {
|
||||
const v = [...this.value, res.data.filepath]
|
||||
this.$emit("input", v)
|
||||
} else {
|
||||
this.$emit("input", [res.data.filepath])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
this.$refs.imageUpload.handleRemove(file);
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
async handleDelete(file) {
|
||||
const resp = await $.post(FILE_DELETE_ADDRESS, {id: file.name})
|
||||
const findex = this.fileList.map(f => f.name).indexOf(file.name);
|
||||
if (findex > -1) {
|
||||
this.fileList.splice(findex, 1)
|
||||
if (this.limit === 1) {
|
||||
this.$emit("input", this.fileList.map(v => v.name).join('、'))
|
||||
} else {
|
||||
this.$emit("input", this.fileList.map(v => v.name))
|
||||
}
|
||||
}
|
||||
/*if (resp.code === 0) {
|
||||
this.$message.success(resp.msg)
|
||||
const findex = this.fileList.map(f => f.name).indexOf(file.name);
|
||||
if (findex > -1) {
|
||||
this.fileList.splice(findex, 1)
|
||||
if (this.limit === 1) {
|
||||
this.$emit("input", this.fileList.map(v => v.name).join('、'))
|
||||
} else {
|
||||
this.$emit("input", this.fileList.map(v => v.name))
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}*/
|
||||
|
||||
|
||||
},
|
||||
// 上传失败
|
||||
handleUploadError() {
|
||||
this.$message.error("上传图片失败，请重试");
|
||||
},
|
||||
// 预览
|
||||
handlePictureCardPreview(file) {
|
||||
if (file.url) {
|
||||
let image = new Image();
|
||||
image.src = file.url
|
||||
let viewer = new Viewer(image);
|
||||
viewer.show();
|
||||
} else {
|
||||
viewImage(file.response.data.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.component-upload-image .el-upload--picture-card {
|
||||
width: var(--box-width, '100px') !important;
|
||||
height: var(--box-height, '100px') !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-upload--picture-card i {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.el-upload-list--picture-card .el-upload-list__item {
|
||||
width: var(--box-width, '100px');
|
||||
height: var(--box-height, '100px');
|
||||
}
|
||||
|
||||
.hidePic .el-upload--picture-card {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-list-enter-active,
|
||||
.el-list-leave-active {
|
||||
transition: all 0s;
|
||||
}
|
||||
|
||||
.el-list-enter, .el-list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.component-upload-image {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.component-upload-image > div:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-upload__tip {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user