62 lines
2.8 KiB
Vue
62 lines
2.8 KiB
Vue
<template>
|
|
<el-upload action="/platform/sys/file/uploadDynamicReturnUrl" name="file" list-type="picture-card"
|
|
:file-list="fileList" :limit="limit" :before-upload="beforeUpload"
|
|
:on-success="success" :on-error="error" :on-exceed="exceed" :on-remove="remove" :on-preview="open"
|
|
:style="{'--therapy-width': width + 'px', '--therapy-height': height + 'px'}">
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</template>
|
|
<script>
|
|
module.exports = {
|
|
props: {value: {type: [String, Array], default: ''}, limit: {type: Number, default: 1},
|
|
width: {type: Number, default: 100}, height: {type: Number, default: 100}, fileType: Array, fileSize: Number},
|
|
data() { return {fileList: []}; },
|
|
watch: {value: {immediate: true, deep: true, handler(values) {
|
|
const items = Array.isArray(values) ? values : values ? [values] : [];
|
|
this.fileList = items.map((value, index) => ({name: '图片' + (index + 1), url: therapyPreview(value), storedValue: value}));
|
|
}}},
|
|
methods: {
|
|
beforeUpload(file) {
|
|
if (this.fileType && !this.fileType.includes(file.name.split('.').pop().toLowerCase())) {
|
|
this.$message.warning('图片格式不符合要求'); return false;
|
|
}
|
|
if (this.fileSize && file.size > this.fileSize * 1024 * 1024) {
|
|
this.$message.warning('图片大小超过限制'); return false;
|
|
}
|
|
return true;
|
|
},
|
|
success(result, file, list) {
|
|
if (result.code !== 0) {
|
|
list.splice(list.indexOf(file), 1);
|
|
this.$message.error(result.msg); return;
|
|
}
|
|
if (typeof result.data !== 'string' || !result.data) {
|
|
list.splice(list.indexOf(file), 1);
|
|
this.$message.error('上传未返回图片地址'); return;
|
|
}
|
|
file.url = result.data;
|
|
file.storedValue = result.data;
|
|
this.emit(list);
|
|
},
|
|
error() { this.$message.error('图片上传失败，请重试'); },
|
|
exceed() { this.$message.warning('最多上传' + this.limit + '张图片'); },
|
|
remove(file, list) { this.emit(list); },
|
|
emit(list) {
|
|
const values = list.map(file => file.storedValue).filter(Boolean);
|
|
this.$emit('input', Array.isArray(this.value) ? values : values[0] || '');
|
|
},
|
|
open(file) {
|
|
const img = new Image();
|
|
img.src = file.url;
|
|
const viewer = new Viewer(img, {hidden() { viewer.destroy(); }});
|
|
viewer.show();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.el-upload-list--picture-card .el-upload-list__item, .el-upload--picture-card {
|
|
width: var(--therapy-width); height: var(--therapy-height); line-height: var(--therapy-height);
|
|
}
|
|
</style>
|