zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Esacpe
2025-07-19 20:33:14 +08:00
parent 671e33492d
commit 1074049a6b
7 changed files with 48 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/MyComponents/Upload/index.vue
View File

@ -1,73 +1,35 @@
<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"
>
<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">
<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)"
>
<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 v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
<div v-else>
<div class="file-wrap">
<span>
<svg-icon :icon="getSuffix(file.name)" />
</span>
<span><svg-icon :icon="getSuffix(file.name)" /></span>
<span class="file-name">{{ file.name }}</span>
</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>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<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>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
@ -80,7 +42,6 @@
</template>
<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, computed, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
@ -107,17 +68,19 @@ const props = defineProps({
type: Boolean,
default: false
},
isAll:{
isAll: {
type: Boolean,
default: false
}
});
const actionUrl = computed(() =>{
if(props.isAll){
return "/mosty-api/mosty-base/minio/image/upload/id"
}else{
return props.isImg ? "/mosty-api/mosty-base/minio/image/upload/id" : "/mosty-api/mosty-base/minio/file/upload"
const actionUrl = computed(() => {
if (props.isAll) {
return "/mosty-api/mosty-base/minio/image/upload/id";
} else {
return props.isImg
? "/mosty-api/mosty-base/minio/image/upload/id"
: "/mosty-api/mosty-base/minio/file/upload";
}
});
@ -154,7 +117,17 @@ const getSuffix = (fileName) => {
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"];
@ -179,7 +152,6 @@ const headers = ref({
});
const fileList = ref([]);
;
watch(
() => props.modelValue,
(val) => {
@ -187,18 +159,21 @@ watch(
if (arr && arr.length > 0) {
if (!props.sfUrl) {
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{
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 };
if (Object.prototype.toString.call(el) === "[object Object]") {
return { url: el, name: el.name };
} else {
return { url: el };
}
});
}
@ -207,7 +182,6 @@ watch(
{ immediate: true }
);
const handlerSuccess = (res, file) => {
file.url = `/mosty-api/mosty-base/minio/image/download/` + res.data;
fileList.value.push(file);
@ -257,7 +231,6 @@ const handleRemove = (file) => {
emits("update:modelValue", props.modelValue);
};
const propsModelValue = ref();
</script>
<style lang="scss" scoped>