lcw
This commit is contained in:
@ -1,20 +1,33 @@
|
||||
<template>
|
||||
<div class="form-item-box" :class="props.showBtn ? 'showBtn-upload' : ''" :style="{ width: width }">
|
||||
<el-upload v-bind="$attrs" :headers="headers" :multiple="false" class="avatar-uploader" :limit="props.limit"
|
||||
:action="actionUrl" :list-type="props.showBtn ? '' : 'picture-card'" :file-list="fileList" show-file-list
|
||||
:on-exceed="handleExceed" :on-success="handlerSuccess" :before-upload="beforeImgUpload">
|
||||
<el-upload
|
||||
v-bind="$attrs"
|
||||
:headers="headers"
|
||||
:multiple="false"
|
||||
class="avatar-uploader"
|
||||
:limit="props.limit"
|
||||
:action="actionUrl"
|
||||
:list-type="props.showBtn ? '' : 'picture-card'"
|
||||
:file-list="fileList"
|
||||
show-file-list
|
||||
:before-remove="beforeRemove"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handlerSuccess"
|
||||
:before-upload="beforeImgUpload">
|
||||
<template #default>
|
||||
<el-button v-if="props.showBtn" size="small" type="primary">上传文件</el-button>
|
||||
<el-icon v-else>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<el-icon v-else><Plus /></el-icon>
|
||||
</template>
|
||||
<template #file="{ file }" v-if="!props.showBtn">
|
||||
<div v-if="props.isImg">
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><el-icon> <zoom-in /></el-icon></span>
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)"><el-icon><Delete /></el-icon></span>
|
||||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||
<el-icon> <zoom-in /></el-icon>
|
||||
</span>
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
@ -24,14 +37,10 @@
|
||||
</div>
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
||||
<el-icon>
|
||||
<Download />
|
||||
</el-icon>
|
||||
<el-icon><Download /></el-icon>
|
||||
</span>
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -45,7 +54,7 @@
|
||||
|
||||
<script setup>
|
||||
import { COMPONENT_WIDTH } from "@/constant";
|
||||
import { ref, defineProps, defineEmits, computed, watch, onMounted } from "vue";
|
||||
import { ref, defineProps, defineEmits, computed, watch, onMounted, onUnmounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useStore } from "vuex";
|
||||
const props = defineProps({
|
||||
@ -72,9 +81,30 @@ const props = defineProps({
|
||||
},
|
||||
isAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: true //所有类型都可以用这个接口，接口返回的是id
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const store = useStore();
|
||||
const dialogImageUrl = ref("");
|
||||
const dialogVisible = ref(false);
|
||||
const disabled = ref(false);
|
||||
const headers = ref({
|
||||
Authorization: store.getters.token
|
||||
});
|
||||
const fileList = ref([]);
|
||||
|
||||
watch(() => props.modelValue,(val) => {
|
||||
let arr = val ? (Array.isArray(val) ? val :[val]): [];
|
||||
if(arr.length == 0 ) return fileList.value = [];
|
||||
fileList.value = arr.map((el) => {
|
||||
if (Object.prototype.toString.call(el) === "[object Object]") {
|
||||
return props.isAll ? { url: `/mosty-api/mosty-base/minio/image/download/` + el.id, name: el.name ,id : el } : { url:el,name:el.name , id : el};
|
||||
} else {
|
||||
return { url: `/mosty-api/mosty-base/minio/image/download/` + el,id : el };
|
||||
}
|
||||
});
|
||||
},{ immediate: true,deep:true });
|
||||
|
||||
const actionUrl = computed(() => {
|
||||
if (props.isAll) {
|
||||
@ -84,8 +114,6 @@ const actionUrl = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue", "handleChange"]);
|
||||
|
||||
//获取后缀
|
||||
const getSuffix = (fileName) => {
|
||||
let suffix = "";
|
||||
@ -108,101 +136,37 @@ const getSuffix = (fileName) => {
|
||||
//excel XLS
|
||||
const excelist = ["xls", "xlsx"];
|
||||
if (excelist.includes(suffix)) return "XLS";
|
||||
|
||||
// 匹配 word
|
||||
var wordlist = ["doc", "docx"];
|
||||
if (wordlist.includes(suffix)) return "DOC";
|
||||
|
||||
//pdf
|
||||
if (suffix === "pdf") return "PDF";
|
||||
|
||||
//视频 音频
|
||||
var videolist = [
|
||||
"mp4",
|
||||
"m2v",
|
||||
"mkv",
|
||||
"rmvb",
|
||||
"wmv",
|
||||
"avi",
|
||||
"flv",
|
||||
"mov",
|
||||
"m4v"
|
||||
];
|
||||
var videolist = ["mp4","m2v","mkv","rmvb","wmv","avi","flv","mov","m4v"];
|
||||
if (videolist.includes(suffix)) return "VIDEO";
|
||||
|
||||
var musiclist = ["mp3", "wav", "wmv"];
|
||||
if (musiclist.includes(suffix)) return "MUSIC";
|
||||
|
||||
var pptlist = ["ppt", "pptx"];
|
||||
if (pptlist.includes(suffix)) return "PPT";
|
||||
|
||||
//压缩包
|
||||
var yslist = ["7z", "rar", "zip", "apz", "ar", "hpk", "hyp", "hbc2"];
|
||||
if (yslist.includes(suffix)) return "YS";
|
||||
|
||||
//否则返回other
|
||||
return "OTHER";
|
||||
};
|
||||
const store = useStore();
|
||||
const dialogImageUrl = ref("");
|
||||
const dialogVisible = ref(false);
|
||||
const disabled = ref(false);
|
||||
const headers = ref({
|
||||
Authorization: store.getters.token
|
||||
});
|
||||
|
||||
const fileList = ref([]);
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
let arr = val ? val : [];
|
||||
if (arr && arr.length > 0) {
|
||||
if (!props.sfUrl) {
|
||||
if (Array.isArray(arr)) {
|
||||
fileList.value = arr.map((el) => {
|
||||
if (Object.prototype.toString.call(el) === "[object Object]") {
|
||||
return {
|
||||
url: `/mosty-api/mosty-base/minio/image/download/` + el,
|
||||
name: el.name
|
||||
};
|
||||
} else {
|
||||
return { url: `/mosty-api/mosty-base/minio/image/download/` + el };
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const fjListData=arr.split(',')
|
||||
fileList.value = fjListData.map((el) => {
|
||||
if (Object.prototype.toString.call(el) === "[object Object]") {
|
||||
return {
|
||||
url: `/mosty-api/mosty-base/minio/image/download/` + el,
|
||||
name: el.name
|
||||
};
|
||||
} else {
|
||||
return { url: `/mosty-api/mosty-base/minio/image/download/` + el };
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
fileList.value = arr.map((el) => {
|
||||
if (Object.prototype.toString.call(el) === "[object Object]") {
|
||||
return { url: el, name: el.name };
|
||||
} else {
|
||||
return { url: el };
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const handlerSuccess = (res, file) => {
|
||||
file.url = `/mosty-api/mosty-base/minio/image/download/` + res.data;
|
||||
// file.url = `/mosty-api/mosty-base/minio/image/download/` + res.data;
|
||||
file.id = res.data;
|
||||
fileList.value.push(file);
|
||||
let arr = props.modelValue ? props.modelValue : [];
|
||||
arr.push(res.data);
|
||||
let arr = []
|
||||
if(props.isImg){
|
||||
arr = fileList.value.map((el) => el.id)
|
||||
}else{
|
||||
arr = fileList.value.map((el) => ({ id:el.id, name:el.name}))
|
||||
}
|
||||
emits("update:modelValue", arr);
|
||||
emits("handleChange", props.modelValue);
|
||||
};
|
||||
|
||||
const handleExceed = (files, fileList) => {
|
||||
@ -212,16 +176,10 @@ const handleExceed = (files, fileList) => {
|
||||
const beforeImgUpload = (file) => {
|
||||
if (props.isImg) {
|
||||
let isIMG = false;
|
||||
if (getSuffix(file.name) === "IMG") {
|
||||
isIMG = true;
|
||||
}
|
||||
if (getSuffix(file.name) === "IMG") isIMG = true;
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
if (!isIMG) {
|
||||
ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
|
||||
}
|
||||
if (!isLt5M) {
|
||||
ElMessage.error("上传图片大小不能超过 5MB!");
|
||||
}
|
||||
if (!isIMG) ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
|
||||
if (!isLt5M) ElMessage.error("上传图片大小不能超过 5MB!");
|
||||
return isIMG && isLt5M;
|
||||
} else {
|
||||
return true;
|
||||
@ -235,16 +193,25 @@ const handlePictureCardPreview = (file) => {
|
||||
const handleDownload = (file) => {
|
||||
window.open(file.response.data);
|
||||
};
|
||||
|
||||
// 删除文件 触发父组件更新
|
||||
const beforeRemove = (file) => {
|
||||
let index = fileList.value.findIndex(function (item) {
|
||||
return item.id === file.id;
|
||||
});
|
||||
props.modelValue.splice(index, 1);
|
||||
emits("update:modelValue", props.modelValue);
|
||||
}
|
||||
|
||||
const handleRemove = (file) => {
|
||||
let index = fileList.value.findIndex(function (item) {
|
||||
return item.url === file.url;
|
||||
return item.id === file.id;
|
||||
});
|
||||
fileList.value.splice(index, 1);
|
||||
props.modelValue.splice(index, 1);
|
||||
emits("handleChange", props.modelValue);
|
||||
emits("update:modelValue", props.modelValue);
|
||||
};
|
||||
const propsModelValue = ref();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user