gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整上传图片尺寸

Browse Source
This commit is contained in:
zjl 2024-10-08 14:08:10 +08:00
parent fb86d5f8fd
commit 08230c5343
5 changed files with 959 additions and 942 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

690
src/components/Upload/Image.vue
View File

@ -1,365 +1,365 @@
<template> <template>
<div class="upload-box"> <div class="upload-box">
<el-upload <el-upload
action="#" action="#"
:id="uuid" :id="uuid"
:class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']" :class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
:multiple="false" :multiple="false"
:disabled="loading?true:self_disabled" :disabled="loading ? true : self_disabled"
:show-file-list="false" :show-file-list="false"
:http-request="handleHttpUpload" :http-request="handleHttpUpload"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:on-error="uploadError" :on-error="uploadError"
:drag="drag" :drag="drag"
:accept="fileType.join(',')" :accept="fileType.join(',')"
> >
<template v-if="imageUrl"> <template v-if="imageUrl">
<img v-if="imageUrl.indexOf('.pdf')<0" :src="imageUrl" class="upload-image" /> <img v-if="imageUrl.indexOf('.pdf') < 0" :src="imageUrl" class="upload-image" />
<div v-else class="upload-image">{{imageUrl}}</div> <div v-else class="upload-image">{{ imageUrl }}</div>
<div class="upload-handle" @click.stop> <div class="upload-handle" @click.stop>
<div class="handle-icon" @click="editImg" v-if="!self_disabled"> <div class="handle-icon" @click="editImg" v-if="!self_disabled">
<el-icon :size="props.iconSize"> <el-icon :size="props.iconSize">
<Edit /> <Edit />
</el-icon> </el-icon>
</div> </div>
<div class="handle-icon" @click="viewImg"> <div class="handle-icon" @click="viewImg">
<el-icon :size="props.iconSize"> <el-icon :size="props.iconSize">
<ZoomIn /> <ZoomIn />
</el-icon> </el-icon>
</div> </div>
<div class="handle-icon" @click="deleteImg" v-if="!self_disabled"> <div class="handle-icon" @click="deleteImg" v-if="!self_disabled">
<el-icon :size="props.iconSize"> <el-icon :size="props.iconSize">
<Delete /> <Delete />
</el-icon> </el-icon>
</div> </div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="upload-empty"> <div class="upload-empty">
<slot name="empty"> <slot name="empty">
<el-icon v-if="!loading"><Plus /></el-icon> <el-icon v-if="!loading"><Plus /></el-icon>
<span v-else>上传中{{progress}}%</span> <span v-else>上传中{{ progress }}%</span>
<!-- <span>请上传图片</span> --> <!-- <span>请上传图片</span> -->
</slot> </slot>
</div> </div>
</template> </template>
</el-upload> </el-upload>
<div class="el-upload__tip"> <div class="el-upload__tip">
<slot name="tip"></slot> <slot name="tip"></slot>
</div> </div>
<el-image-viewer <el-image-viewer
:teleported="true" :teleported="true"
v-if="imgViewVisible" v-if="imgViewVisible"
@close="imgViewVisible = false" @close="imgViewVisible = false"
:url-list="[imageUrl]" :url-list="[imageUrl]"
/> />
</div> </div>
<Cropper <Cropper
v-model:visible="cropperVisible" v-model:visible="cropperVisible"
v-if="cropperVisible" v-if="cropperVisible"
:cropperSize="cropperSize" :cropperSize="cropperSize"
:oImg="oImg" :oImg="oImg"
@success="cropperSuccess" @success="cropperSuccess"
:fileName="fileName" :fileName="fileName"
></Cropper> />
</template> </template>
<script setup lang="ts" name="UploadImg"> <script setup lang="ts" name="UploadImg">
import { ref, computed, inject } from 'vue'; import { ref, computed, inject } from 'vue';
import { ElNotification, formContextKey, formItemContextKey } from 'element-plus'; import { ElNotification, formContextKey, formItemContextKey } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from 'element-plus'; import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { generateUUID } from '@/utils/auth'; import { generateUUID } from '@/utils/auth';
import {upload} from '@/api/common' import { upload } from '@/api/common';
import Cropper from '@/components/Upload/cropper.vue' import Cropper from '@/components/Upload/cropper.vue';
interface UploadFileProps { interface UploadFileProps {
imageUrl?: string; // 图片地址 ==> 必传 imageUrl?: string; // 图片地址 ==> 必传
uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传 uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true） drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false） disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M） fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]） fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height?: string; // 组件高度 ==> 非必传（默认为 150px） height?: string; // 组件高度 ==> 非必传（默认为 150px）
width?: string; // 组件宽度 ==> 非必传（默认为 150px） width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px） borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
iconSize?: number; iconSize?: number;
name?: string; name?: string;
cropper:Boolean, cropper: Boolean;
cropperSize?:Object cropperSize?: Object;
}
const cropperVisible=ref(false)
// 接受父组件参数
const props = withDefaults(defineProps<UploadFileProps>(), {
imageUrl: '',
uploadFileUrl: '/admin/file/upload',
drag: true,
disabled: false,
fileSize: 5,
fileType: () => ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
height: '150px',
width: '150px',
borderRadius: '8px',
name:'',
cropper:false,
cropperSize:null
});
// 生成组件唯一id
const uuid = ref('id-' + generateUUID());
const viewImg=()=>{
if(props.imageUrl.indexOf('.pdf')<0){
imgViewVisible.value = true
}else{
window.open(props.imageUrl)
} }
}
// 查看图片 const cropperVisible = ref(false);
const imgViewVisible = ref(false); // 接受父组件参数
// 获取 el-form 组件上下文 const props = withDefaults(defineProps<UploadFileProps>(), {
const formContext = inject(formContextKey, void 0); imageUrl: '',
// 获取 el-form-item 组件上下文 uploadFileUrl: '/admin/file/upload',
const formItemContext = inject(formItemContextKey, void 0); drag: true,
// 判断是否禁用上传和删除 disabled: false,
const self_disabled = computed(() => { fileSize: 5,
return props.disabled || formContext?.disabled; fileType: () => ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
}); height: '120px',
width: '120px',
borderRadius: '8px',
name: '',
cropper: false,
cropperSize: null,
});
/** // 生成组件唯一id
* @description 图片上传 const uuid = ref('id-' + generateUUID());
* @param options upload 所有配置项
* */
interface UploadEmits {
(e: 'update:imageUrl', value: string): void,
(e: 'changeFileName', value: string): void;
}
const fileName=ref('') const viewImg = () => {
const oImg=ref('') if (props.imageUrl.indexOf('.pdf') < 0) {
const emit = defineEmits<UploadEmits>(); imgViewVisible.value = true;
const loading=ref(false) } else {
const progress=ref(0) window.open(props.imageUrl);
const cropperSuccess=(fileChile:any)=>{ }
actionFile(fileChile) };
}
const actionFile=async (fileChild:any)=>{ // 查看图片
loading.value=true const imgViewVisible = ref(false);
try { // 获取 el-form 组件上下文
const formData = new FormData() const formContext = inject(formContextKey, void 0);
formData.append('file',fileChild) // 获取 el-form-item 组件上下文
formData.append('name',props.name) const formItemContext = inject(formItemContextKey, void 0);
const res =await upload(formData) // 判断是否禁用上传和删除
emit('update:imageUrl',res.fileUrl); const self_disabled = computed(() => {
emit('changeFileName',res.originalName) return props.disabled || formContext?.disabled;
// 调用 el-form 内部的校验方法（可自动校验） });
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
} catch (error) { /**
emit('update:imageUrl',''); * @description 图片上传
emit('changeFileName','') * @param options upload 所有配置项
}finally { * */
progress.value=0 interface UploadEmits {
loading.value=false (e: 'update:imageUrl', value: string): void;
(e: 'changeFileName', value: string): void;
} }
}
const handleHttpUploadOptions=ref({}) const fileName = ref('');
const oImg = ref('');
const emit = defineEmits<UploadEmits>();
const loading = ref(false);
const progress = ref(0);
const cropperSuccess = (fileChile: any) => {
actionFile(fileChile);
};
const actionFile = async (fileChild: any) => {
loading.value = true;
try {
const formData = new FormData();
formData.append('file', fileChild);
formData.append('name', props.name);
const res = await upload(formData);
emit('update:imageUrl', res.fileUrl);
emit('changeFileName', res.originalName);
// 调用 el-form 内部的校验方法（可自动校验）
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
} catch (error) {
emit('update:imageUrl', '');
emit('changeFileName', '');
} finally {
progress.value = 0;
loading.value = false;
}
};
const handleHttpUpload = async (options: UploadRequestOptions) => { const handleHttpUploadOptions = ref({});
handleHttpUploadOptions.value=options
if(props.cropper){ const handleHttpUpload = async (options: UploadRequestOptions) => {
fileName.value= options.file.name handleHttpUploadOptions.value = options;
let reader = new FileReader(); if (props.cropper) {
reader.readAsDataURL(options.file); fileName.value = options.file.name;
let img = new Image(); let reader = new FileReader();
reader.onload = function (e) { reader.readAsDataURL(options.file);
img.src = this.result; let img = new Image();
img.onload = function () { reader.onload = function (e) {
let base = e.target.result; img.src = this.result;
oImg.value= base; img.onload = function () {
event.target.value = ""; let base = e.target.result;
cropperVisible.value = true; oImg.value = base;
event.target.value = '';
cropperVisible.value = true;
};
}; };
}; return;
return }
} actionFile(options.file);
actionFile(options.file) };
};
/** /**
* @description 删除图片 * @description 删除图片
* */ * */
const deleteImg = () => { const deleteImg = () => {
emit('update:imageUrl', ''); emit('update:imageUrl', '');
emit('changeFileName','') emit('changeFileName', '');
}; };
/** /**
* @description 编辑图片 * @description 编辑图片
* */ * */
const editImg = () => { const editImg = () => {
const dom = document.querySelector(`#${uuid.value} .el-upload__input`); const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
dom && dom.dispatchEvent(new MouseEvent('click')); dom && dom.dispatchEvent(new MouseEvent('click'));
}; };
/** /**
* @description 文件上传之前判断 * @description 文件上传之前判断
* @param rawFile 选择的文件 * @param rawFile 选择的文件
* */ * */
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => { const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize; const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType); const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
if (!imgType) if (!imgType)
ElNotification({ ElNotification({
title: '温馨提示', title: '温馨提示',
message: '上传图片不符合所需的格式！', message: '上传图片不符合所需的格式！',
type: 'warning', type: 'warning',
}); });
if (!imgSize) if (!imgSize)
setTimeout(() => { setTimeout(() => {
ElNotification({ ElNotification({
title: '温馨提示', title: '温馨提示',
message: `上传图片大小不能超过 ${props.fileSize}M！`, message: `上传图片大小不能超过 ${props.fileSize}M！`,
type: 'warning', type: 'warning',
}); });
}, 0); }, 0);
return imgType && imgSize; return imgType && imgSize;
}; };
/** /**
* @description 图片上传错误 * @description 图片上传错误
* */ * */
const uploadError = () => { const uploadError = () => {
ElNotification({ ElNotification({
title: '温馨提示', title: '温馨提示',
message: '图片上传失败，请您重新上传！', message: '图片上传失败，请您重新上传！',
type: 'error', type: 'error',
}); });
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.is-error { .is-error {
.upload { .upload {
:deep(.el-upload), :deep(.el-upload),
:deep(.el-upload-dragger) { :deep(.el-upload-dragger) {
border: 1px dashed var(--el-color-danger) !important; border: 1px dashed var(--el-color-danger) !important;
&:hover { &:hover {
border-color: var(--el-color-primary) !important; border-color: var(--el-color-primary) !important;
} }
} }
} }
} }
:deep(.disabled) { :deep(.disabled) {
.el-upload, .el-upload,
.el-upload-dragger { .el-upload-dragger {
cursor: not-allowed !important; cursor: not-allowed !important;
background: var(--el-disabled-bg-color); background: var(--el-disabled-bg-color);
border: 1px dashed var(--el-border-color-darker) !important; border: 1px dashed var(--el-border-color-darker) !important;
&:hover { &:hover {
border: 1px dashed var(--el-border-color-darker) !important; border: 1px dashed var(--el-border-color-darker) !important;
} }
} }
} }
.upload-box { .upload-box {
.no-border { .no-border {
:deep(.el-upload) { :deep(.el-upload) {
border: none !important; border: none !important;
} }
} }
:deep(.upload) { :deep(.upload) {
.el-upload { .el-upload {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: v-bind(width); width: v-bind(width);
height: v-bind(height); height: v-bind(height);
overflow: hidden; overflow: hidden;
border: 1px dashed var(--el-border-color-darker); border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius); border-radius: v-bind(borderRadius);
transition: var(--el-transition-duration-fast); transition: var(--el-transition-duration-fast);
&:hover { &:hover {
border-color: var(--el-color-primary); border-color: var(--el-color-primary);
.upload-handle { .upload-handle {
opacity: 1; opacity: 1;
} }
} }
.el-upload-dragger { .el-upload-dragger {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: transparent;
border: 1px dashed var(--el-border-color-darker); border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius); border-radius: v-bind(borderRadius);
&:hover { &:hover {
border: 1px dashed var(--el-color-primary); border: 1px dashed var(--el-color-primary);
} }
} }
.el-upload-dragger.is-dragover { .el-upload-dragger.is-dragover {
background-color: var(--el-color-primary-light-9); background-color: var(--el-color-primary-light-9);
border: 2px dashed var(--el-color-primary) !important; border: 2px dashed var(--el-color-primary) !important;
} }
.upload-image { .upload-image {
width: 100%; width: 90%;
height: 100%; height: 90%;
object-fit: contain; object-fit: contain;
} }
.upload-empty { .upload-empty {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
color: var(--el-color-info); color: var(--el-color-info);
.el-icon { .el-icon {
font-size: 28px; font-size: 28px;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
} }
} }
.upload-handle { .upload-handle {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
background: rgb(0 0 0 / 60%); background: rgb(0 0 0 / 60%);
opacity: 0; opacity: 0;
transition: var(--el-transition-duration-fast); transition: var(--el-transition-duration-fast);
.handle-icon { .handle-icon {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 6%; padding: 0 6%;
color: aliceblue; color: aliceblue;
.el-icon { .el-icon {
margin-bottom: 40%; margin-bottom: 40%;
font-size: 130%; font-size: 130%;
line-height: 130%; line-height: 130%;
} }
span { span {
font-size: 85%; font-size: 85%;
line-height: 85%; line-height: 85%;
} }
} }
} }
} }
} }
.el-upload__tip { .el-upload__tip {
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
} }
} }
</style> </style>

513
src/components/Upload/Images.vue
View File

@ -1,8 +1,7 @@
<template> <template>
<div class="upload-box"> <div class="upload-box">
<div v-for="(item, index) in fileList" class="items"> <div v-for="(item, index) in fileList" class="items">
<img v-if="item.filePath" :src="item.filePath" <img v-if="item.filePath" :src="item.filePath" class="upload-image" />
class="upload-image" />
<div class="upload-handle" @click.stop> <div class="upload-handle" @click.stop>
<div class="handle-icon" @click="handleEdit(index)" v-if="!self_disabled"> <div class="handle-icon" @click="handleEdit(index)" v-if="!self_disabled">
<el-icon :size="props.iconSize"> <el-icon :size="props.iconSize">
@ -21,300 +20,314 @@
</div> </div>
</div> </div>
</div> </div>
<el-upload action="#" :id="uuid" class="upload-demo my-upload-images" <el-upload
:class="fileList.length > 0 && !loading ? 'success-file' : ''" :multiple="multiple" ref="uploadRef" action="#"
:disabled="loading ? true : (self_disabled || fileList.length >= props.limit)" :http-request="handleHttpUpload" :id="uuid"
:before-upload="beforeUpload" list-type="picture-card" :limit="limit" :file-list="fileList" class="upload-demo my-upload-images"
:show-file-list="false" v-if="!self_disabled" :on-exceed="onExceed" :accept="props.fileType"> :class="fileList.length > 0 && !loading ? 'success-file' : ''"
:multiple="multiple"
ref="uploadRef"
:disabled="loading ? true : self_disabled || fileList.length >= props.limit"
:http-request="handleHttpUpload"
:before-upload="beforeUpload"
list-type="picture-card"
:limit="limit"
:file-list="fileList"
:show-file-list="false"
v-if="!self_disabled"
:on-exceed="onExceed"
:accept="props.fileType"
>
<el-icon v-if="!loading"> <el-icon v-if="!loading">
<Plus /> <Plus />
</el-icon> </el-icon>
<el-progress type="circle" v-else :percentage="progress"></el-progress> <el-progress type="circle" v-else :percentage="progress" />
</el-upload> </el-upload>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed,ref } from "vue"; import { computed, ref } from 'vue';
import { ElNotification, UploadFile, UploadInstance } from "element-plus"; import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from "element-plus"; import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue';
import { generateUUID } from "@/utils/auth"; import { generateUUID } from '@/utils/auth';
const uploadRef = ref<UploadInstance>(); const uploadRef = ref<UploadInstance>();
import {upload} from '@/api/common' import { upload } from '@/api/common';
// 接受父组件参数 // 接受父组件参数
const props = defineProps({ const props = defineProps({
zIndex: { zIndex: {
default: -1 default: -1,
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
btnTip: { btnTip: {
type: String, type: String,
default: '' default: '',
}, },
limit: { limit: {
type: Number, type: Number,
default: undefined default: undefined,
}, },
width: { width: {
type: String, type: String,
default: '150px' default: '150px',
}, },
height: { height: {
type: String, type: String,
default: '150px' default: '150px',
}, },
borderRadius: { borderRadius: {
type: String, type: String,
default: '8px' default: '8px',
}, },
fileList: { fileList: {
type: Array, type: Array,
required: true, required: true,
default: [] default: [],
}, },
disabled: { disabled: {
default: false default: false,
}, },
fileSize: { fileSize: {
default: 200 default: 200,
}, },
orderNo: { orderNo: {
default: '' default: '',
}, },
fileType: { fileType: {
default: "" default: '',
}, },
name: { name: {
default: "" default: '',
} },
}); });
// 生成组件唯一id // 生成组件唯一id
const uuid = ref("id-" + generateUUID()); const uuid = ref('id-' + generateUUID());
// 判断是否禁用上传和删除 // 判断是否禁用上传和删除
const self_disabled = computed(() => { const self_disabled = computed(() => {
return props.disabled; return props.disabled;
}); });
let editIndex = '' let editIndex = '';
const emit = defineEmits(["upload"]); const emit = defineEmits(['upload']);
const progress = ref(0) const progress = ref(0);
const loading = ref(false); const loading = ref(false);
const handleHttpUpload = async (options: UploadRequestOptions) => { const handleHttpUpload = async (options: UploadRequestOptions) => {
loading.value = true; loading.value = true;
try { try {
const formData = new FormData() const formData = new FormData();
formData.append('file',options.file) formData.append('file', options.file);
formData.append('name',props.name) formData.append('name', props.name);
const res =await upload(formData) const res = await upload(formData);
if (props.multiple) { if (props.multiple) {
let list = JSON.parse(JSON.stringify(props.fileList)) let list = JSON.parse(JSON.stringify(props.fileList));
if (editIndex !== '') { if (editIndex !== '') {
list.splice(editIndex, 1, { list.splice(editIndex, 1, {
url: res.fileUrl, url: res.fileUrl,
name: res.originalName, name: res.originalName,
filePath: res.fileUrl, filePath: res.fileUrl,
fileName: res.originalName fileName: res.originalName,
}) });
editIndex = '' editIndex = '';
} else {
list.push({
url: res.fileUrl,
name: res.originalName,
filePath: res.fileUrl,
fileName: res.originalName,
});
}
emit('upload', list, props.zIndex);
} else { } else {
list.push({ emit('upload', res, props.zIndex);
url: res.fileUrl,
name: res.originalName,
filePath: res.fileUrl,
fileName: res.originalName
})
} }
emit('upload', list,props.zIndex) } catch (error) {
} else { ElNotification({
emit("upload", res, props.zIndex); title: '温馨提示',
message: '上传文件失败！',
type: 'error',
});
if (props.multiple) {
emit('upload', props.fileList, props.zIndex);
} else {
uploadRef.value!.clearFiles();
emit('upload', '', props.zIndex);
}
options.onError(error as any);
} finally {
progress.value = 0;
loading.value = false;
} }
} catch (error) { };
ElNotification({
title: "温馨提示", const onPreview = (index: any) => {
message: "上传文件失败！", window.open(props.fileList[index].filePath);
type: "error" };
});
const handleEdit = (index: any) => {
editIndex = index;
const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
dom && dom.dispatchEvent(new MouseEvent('click'));
};
const handleRemove = (index: any) => {
editIndex = index;
if (props.multiple) { if (props.multiple) {
emit('upload', props.fileList,props.zIndex) emit(
'upload',
props.fileList.filter((f, i) => !(editIndex == i)),
props.zIndex,
);
} else { } else {
uploadRef.value!.clearFiles(); uploadRef.value!.clearFiles();
emit("upload", "", props.zIndex); emit('upload', '', props.zIndex);
} }
options.onError(error as any); };
} finally {
progress.value = 0
loading.value = false;
}
};
const onPreview = (index: any) => { const onExceed = () => {
window.open(props.fileList[index].filePath) if (props.limit) {
}
const handleEdit = (index: any) => {
editIndex = index
const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
dom && dom.dispatchEvent(new MouseEvent('click'));
}
const handleRemove = (index: any) => {
editIndex = index
if (props.multiple) {
emit("upload", props.fileList.filter((f, i) => !(editIndex == i)),props.zIndex)
} else {
uploadRef.value!.clearFiles();
emit("upload", "" ,props.zIndex);
}
};
const onExceed = () => {
if (props.limit) {
ElNotification({
title: "温馨提示",
message: `最多支持上传${props.limit}张`,
type: "warning"
});
}
};
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
if (!imgSize) {
ElNotification({
title: "温馨提示",
message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: "warning"
});
return false;
}
if (props.fileType) {
let fileType = props.fileType.replace(/\s/g, "");
fileType.split('.').join('|')
let fileIndex = rawFile.name.lastIndexOf('.')
let substrName = rawFile.name.substr(fileIndex)
if (fileType.indexOf(substrName) == -1) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: "上传文件不符合所需的格式！", message: `最多支持上传${props.limit}张`,
type: "warning" type: 'warning',
});
}
};
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
if (!imgSize) {
ElNotification({
title: '温馨提示',
message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: 'warning',
}); });
return false; return false;
} }
} if (props.fileType) {
return true; let fileType = props.fileType.replace(/\s/g, '');
}; fileType.split('.').join('|');
let fileIndex = rawFile.name.lastIndexOf('.');
let substrName = rawFile.name.substr(fileIndex);
if (fileType.indexOf(substrName) == -1) {
ElNotification({
title: '温馨提示',
message: '上传文件不符合所需的格式！',
type: 'warning',
});
return false;
}
}
return true;
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.success-file { .success-file {
.el-upload { .el-upload {
.el-upload-dragger {
border-width: 3px;
border-color: var(--el-color-success) !important;
}
}
}
.my-upload-images {
.el-upload-dragger {
padding: var(--el-upload-dragger-padding-vertical);
}
.el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to {
display: none;
}
.el-icon--close-tip {
display: none !important;
}
}
.el-form-item.is-error {
.el-upload-dragger { .el-upload-dragger {
border-width: 3px; border-width: 3px;
border-color: var(--el-color-success) !important; border-color: var(--el-color-error) !important;
} }
} }
}
.my-upload-images { :deep(.el-upload-list__item) {
.el-upload-dragger { transition: none !important;
padding: var(--el-upload-dragger-padding-vertical);
} }
.el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to { .upload-box {
display: none;
}
.el-icon--close-tip {
display: none !important;
}
}
.el-form-item.is-error {
.el-upload-dragger {
border-width: 3px;
border-color: var(--el-color-error) !important;
}
}
:deep(.el-upload-list__item){
transition: none !important;
}
.upload-box {
position: relative;
display: flex;
flex-wrap: wrap;
>div {
margin-right: 10px;
margin-bottom: 10px;
position: relative; position: relative;
display: flex;
flex-wrap: wrap;
> div {
margin-right: 10px;
margin-bottom: 10px;
position: relative;
&.items { &.items {
width: v-bind(width); width: v-bind(width);
height: v-bind(height); height: v-bind(height);
border: 1px dashed var(--el-border-color-darker); border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius); border-radius: v-bind(borderRadius);
} }
&:hover { &:hover {
.upload-handle { .upload-handle {
opacity: 1; opacity: 1;
}
} }
} }
}
.upload-image { .upload-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
.upload-handle { .upload-handle {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
box-sizing: border-box; box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: pointer;
background: rgb(0 0 0 / 60%);
opacity: 0;
transition: var(--el-transition-duration-fast);
.handle-icon {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 6%; width: 100%;
color: aliceblue; height: 100%;
cursor: pointer;
background: rgb(0 0 0 / 60%);
opacity: 0;
transition: var(--el-transition-duration-fast);
.el-icon { .handle-icon {
margin-bottom: 40%; display: flex;
font-size: 130%; flex-direction: column;
line-height: 130%; align-items: center;
} justify-content: center;
padding: 0 6%;
color: aliceblue;
span { .el-icon {
font-size: 85%; margin-bottom: 40%;
line-height: 85%; font-size: 130%;
line-height: 130%;
}
span {
font-size: 85%;
line-height: 85%;
}
} }
} }
} }
}
</style> </style>

320
src/components/Upload/cropper.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<el-dialog <el-dialog
v-model="props.visible" v-model="props.visible"
title="图片裁剪" title="图片裁剪"
:append-to-body="true" :append-to-body="true"
class="cropper_model_dlg" class="cropper_model_dlg"
width="500" width="500"
:close-on-click-modal="false" :close-on-click-modal="false"
:before-close="dialogClose" :before-close="dialogClose"
> >
<div class="cropper_content"> <div class="cropper_content">
<div class="cropper" style="text-align: center;"> <div class="cropper" style="text-align: center">
<vueCropper <vueCropper
ref="cropperRef" ref="cropperRef"
:img="options.img" :img="options.img"
:outputSize="options.outputSize" :outputSize="options.outputSize"
:outputType="options.outputType" :outputType="options.outputType"
:info="options.info" :info="options.info"
:canScale="options.canScale" :canScale="options.canScale"
:autoCrop="options.autoCrop" :autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth" :autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight" :autoCropHeight="options.autoCropHeight"
:fixed="options.fixed" :fixed="options.fixed"
:maximgSize="options.maximgSize" :maximgSize="options.maximgSize"
:fixedBox="options.fixedBox" :fixedBox="options.fixedBox"
:enlarge="options.enlarge" :enlarge="options.enlarge"
:fixedNumber="options.fixedNumber" :fixedNumber="options.fixedNumber"
></vueCropper> />
</div> </div>
<div class="cropper_btns"> <div class="cropper_btns">
<el-button @click="rotateLeft" icon="RefreshLeft" size="mini" title="左旋转"></el-button> <el-button @click="rotateLeft" icon="RefreshLeft" size="mini" title="左旋转" />
<el-button @click="rotateRight" icon="RefreshRight" size="mini" title="右旋转"></el-button> <el-button @click="rotateRight" icon="RefreshRight" size="mini" title="右旋转" />
<el-button @click="changeScale(1)" size="mini" title="放大">+</el-button> <el-button @click="changeScale(1)" size="mini" title="放大">+</el-button>
<el-button @click="changeScale(-1)" size="mini" title="缩小">-</el-button> <el-button @click="changeScale(-1)" size="mini" title="缩小">-</el-button>
</div> </div>
@ -44,154 +44,154 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import VueCropper from "vue-cropper/src/vue-cropper.vue"; import VueCropper from 'vue-cropper/src/vue-cropper.vue';
import { ref, reactive} from 'vue'; import { ref, reactive } from 'vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
type: Boolean, type: Boolean,
required: true, required: true,
default: false default: false,
}, },
cropperSize: { cropperSize: {
type: Object, type: Object,
default() { default() {
return null; return null;
},
},
oImg: {
type: String,
default: '',
},
fileName: {
type: String,
default: '',
},
folder: {
type: String,
default: '',
},
});
const dialogClose = () => {
emit('update:visible', false);
};
const options = reactive({
img: props.oImg, // 裁剪图片的地址
outputSize: 1, // 裁剪生成图片的质量
outputType: 'png', // 裁剪生成图片的格式
info: true, // 裁剪框的大小信息
canScale: true, // 图片是否允许滚动缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: props.cropperSize ? props.cropperSize.width : 200, // 默认生成截图框宽度
autoCropHeight: props.cropperSize ? props.cropperSize.height : 200, // 默认生成截图框高度
fixed: false, // 是否开启截图框宽高固定比例
fixedNumber: [1, 1], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
fixedBox: true, // 固定截图框大小 不允许改变
canMove: true, // 上传图片是否可以移动
canMoveBox: true, // 截图框能否拖动
original: true, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
high: false, // 是否按照设备的dpr输出等比例图片
infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
maximgSize: 100, // 限制图片最大宽度和高度
enlarge: 1, // 图片根据截图框输出比例倍数
mode: 'contain', // 图片默认渲染方式(contain, cover, 100px, 100% auto)
});
const cropperRef = ref();
const addImgLoading = ref(false);
// 左旋转
const rotateLeft = () => {
cropperRef.value.rotateLeft();
};
// 右旋转
const rotateRight = () => {
cropperRef.value.rotateRight();
};
// 放大缩小
const changeScale = (num: any) => {
num = num || 1;
cropperRef.value.changeScale(num);
};
const emit = defineEmits(['success', 'update:visible']);
// base64转图片文件
const dataURLtoFile = (dataurl: any, filename: any) => {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let len = bstr.length;
let u8arr = new Uint8Array(len);
while (len--) {
u8arr[len] = bstr.charCodeAt(len);
} }
}, return new File([u8arr], filename, { type: mime });
oImg: { };
type: String,
default: ""
},
fileName: {
type: String,
default: ""
},
folder: {
type: String,
default: ""
}
});
const dialogClose = () => { const submit = () => {
emit("update:visible", false); cropperRef.value.getCropData((fileData) => {
}; let file = dataURLtoFile(fileData, props.fileName);
const options = reactive({ emit('update:visible', false);
img: props.oImg, // 裁剪图片的地址 emit('success', file);
outputSize: 1, // 裁剪生成图片的质量 });
outputType: "png", // 裁剪生成图片的格式 };
info: true, // 裁剪框的大小信息
canScale: true, // 图片是否允许滚动缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: props.cropperSize ? props.cropperSize.width : 200, // 默认生成截图框宽度
autoCropHeight: props.cropperSize ? props.cropperSize.height : 200, // 默认生成截图框高度
fixed: false, // 是否开启截图框宽高固定比例
fixedNumber: [1, 1], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
fixedBox: true, // 固定截图框大小 不允许改变
canMove: true, // 上传图片是否可以移动
canMoveBox: true, // 截图框能否拖动
original: true, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
high: false, // 是否按照设备的dpr输出等比例图片
infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
maximgSize: 100, // 限制图片最大宽度和高度
enlarge: 1, // 图片根据截图框输出比例倍数
mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)
});
const cropperRef = ref();
const addImgLoading = ref(false); // 暴露变量
defineExpose({});
// 左旋转
const rotateLeft = () => {
cropperRef.value.rotateLeft();
};
// 右旋转
const rotateRight = () => {
cropperRef.value.rotateRight();
};
// 放大缩小
const changeScale = (num: any) => {
num = num || 1;
cropperRef.value.changeScale(num);
};
const emit = defineEmits(["success", "update:visible"]);
// base64转图片文件
const dataURLtoFile=(dataurl:any, filename:any)=> {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let len = bstr.length;
let u8arr = new Uint8Array(len);
while (len--) {
u8arr[len] = bstr.charCodeAt(len);
}
return new File([u8arr], filename, {type: mime});
}
const submit=()=>{
cropperRef.value.getCropData(fileData => {
let file = dataURLtoFile(fileData, props.fileName);
emit("update:visible", false);
emit('success',file)
})
}
// 暴露变量
defineExpose({});
</script> </script>
<style lang="scss"> <style lang="scss">
.cropper_model_dlg { .cropper_model_dlg {
.el-dialog__body { .el-dialog__body {
padding: 0px 20px 60px !important padding: 0px 20px 60px !important;
} }
.cropper_content { .cropper_content {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.add-img { .add-img {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
width: 80px; width: 80px;
height: 28px; height: 28px;
top: 0px; top: 0px;
left: 0px; left: 0px;
} }
.cropper { .cropper {
width: 400px; width: 400px;
height: 400px; height: 400px;
background: yellow; background: yellow;
} }
.cropper500 { .cropper500 {
width: 600px; width: 600px;
height: 600px; height: 600px;
background: yellow; background: yellow;
border: 1px solid #e3e3e3; border: 1px solid #e3e3e3;
} }
.cropper_right { .cropper_right {
width: 520px; width: 520px;
text-align: center; text-align: center;
} }
.cropper_preview { .cropper_preview {
margin: 0 auto; margin: 0 auto;
display: inline-block; display: inline-block;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.cropper_btns { .cropper_btns {
margin-top: 20px; margin-top: 20px;
}
} }
}
</style> </style>

376
src/components/Upload/file.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<el-upload <el-upload
action="#" action="#"
:id="uuid" :id="uuid"
class="upload-demo my-upload-file" class="upload-demo my-upload-file"
:class="fileList.length>0&&!loading?'success-file':''" :class="fileList.length > 0 && !loading ? 'success-file' : ''"
:multiple="multiple" :multiple="multiple"
ref="uploadRef" ref="uploadRef"
:disabled="loading?true:self_disabled" :disabled="loading ? true : self_disabled"
:http-request="handleHttpUpload" :http-request="handleHttpUpload"
:file-list="fileList" :file-list="fileList"
:on-preview="onPreview" :on-preview="onPreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:show-file-list="showFileList" :show-file-list="showFileList"
:drag="isBtn?false:true" :drag="isBtn ? false : true"
:limit="limit" :limit="limit"
> >
<template v-if="isBtn"> <template v-if="isBtn">
<el-tooltip <el-tooltip
v-if="isBtn&&btnTip" v-if="isBtn && btnTip"
class="box-item" class="box-item"
effect="dark" effect="dark"
:content="btnTip" :content="btnTip"
placement="top" placement="top"
> >
<el-button icon="Upload" type="primary">点击上传</el-button> <el-button icon="Upload" type="primary">点击上传</el-button>
</el-tooltip> </el-tooltip>
@ -30,197 +30,201 @@
</template> </template>
<template v-else> <template v-else>
<el-icon class="el-icon--upload"> <el-icon class="el-icon--upload">
<Finished style="color: var(--el-color-success)" v-if="fileList.length>0&&!loading"/> <Finished style="color: var(--el-color-success)" v-if="fileList.length > 0 && !loading" />
<upload-filled v-else/> <upload-filled v-else />
</el-icon> </el-icon>
<div v-if="!self_disabled" class="el-upload__text">{{loading?'上传中':(fileList.length>0?'上传成功':'点击或将文件拖拽到这里上传')}}</div> <div v-if="!self_disabled" class="el-upload__text">{{
loading ? '上传中' : fileList.length > 0 ? '上传成功' : '点击或将文件拖拽到这里上传'
}}</div>
</template> </template>
<template #tip> <template #tip>
<template v-if="!isBtn"> <template v-if="!isBtn">
<div v-if="props.fileType" class="el-upload__tip">支持扩展名：{{ props.fileType }}</div> <div v-if="props.fileType" class="el-upload__tip">支持扩展名：{{ props.fileType }}</div>
<div v-if="props.multiple && props.limit" class="el-upload__tip">最多上传{{props.limit}}个文件</div> <div v-if="props.multiple && props.limit" class="el-upload__tip"
>最多上传{{ props.limit }}个文件</div
>
</template> </template>
</template> </template>
</el-upload> </el-upload>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed,ref} from "vue"; import { computed, ref } from 'vue';
import {ElNotification, UploadFile, UploadInstance} from "element-plus"; import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
import type {UploadProps, UploadRequestOptions} from "element-plus"; import type { UploadProps, UploadRequestOptions } from 'element-plus';
import {generateUUID} from "@/utils/auth"; import { generateUUID } from '@/utils/auth';
const uploadRef = ref<UploadInstance>(); const uploadRef = ref<UploadInstance>();
import {upload} from '@/api/common' import { upload } from '@/api/common';
// 接受父组件参数 // 接受父组件参数
const props = defineProps({ const props = defineProps({
zIndex: { zIndex: {
default: -1 default: -1,
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
isBtn: { isBtn: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
showFileList: { showFileList: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
btnTip: { btnTip: {
type: String, type: String,
default: '' default: '',
}, },
limit: { limit: {
type: Number, type: Number,
default: undefined default: undefined,
}, },
fileList: { fileList: {
type: Array, type: Array,
required: true, required: true,
default: [] default: [],
}, },
disabled: { disabled: {
default: false default: false,
}, },
fileSize: { fileSize: {
default: 200 default: 200,
}, },
orderNo: { orderNo: {
default: '' default: '',
}, },
fileType: { fileType: {
default: "" default: '',
}, },
name: { name: {
default: "" default: '',
} },
}); });
// 生成组件唯一id // 生成组件唯一id
const uuid = ref("id-" + generateUUID()); const uuid = ref('id-' + generateUUID());
// 判断是否禁用上传和删除 // 判断是否禁用上传和删除
const self_disabled = computed(() => { const self_disabled = computed(() => {
return props.disabled; return props.disabled;
}); });
const emit = defineEmits(['upload']);
const emit = defineEmits(["upload"]); const loading = ref(false);
const handleHttpUpload = async (options: UploadRequestOptions) => {
const loading = ref(false); loading.value = true;
const handleHttpUpload = async (options: UploadRequestOptions) => { try {
const formData = new FormData();
loading.value = true; formData.append('file', options.file);
try { formData.append('name', props.name);
const formData = new FormData() const res = await upload(formData);
formData.append('file',options.file) if (props.multiple) {
formData.append('name',props.name) let list = JSON.parse(JSON.stringify(props.fileList));
const res =await upload(formData) list.push({
if(props.multiple){ url: res.fileUrl,
let list=JSON.parse(JSON.stringify(props.fileList)) name: res.originalName,
list.push({ filePath: res.fileUrl,
url: res.fileUrl, fileName: res.originalName,
name: res.originalName,
filePath: res.fileUrl,
fileName: res.originalName,
})
emit('upload', list,props.zIndex)
}else{
emit("upload", res.fileUrl,res.originalName,props.zIndex);
}
} catch (error) {
ElNotification({
title: "温馨提示",
message: "上传文件失败！",
type: "error"
});
if(props.multiple){
emit('upload', props.fileList,props.zIndex)
}else{
uploadRef.value!.clearFiles();
emit("upload", "", "",props.zIndex);
}
options.onError(error as any);
} finally {
loading.value = false;
}
};
const onPreview=(uploadFile: UploadFile)=> {
window.open( uploadFile?.url)
}
const handleRemove: UploadProps["onRemove"] = (file:any) => {
if(props.multiple){
emit("upload",props.fileList.filter((f) => !(f === file.url)),props.zIndex)
}else{
uploadRef.value!.clearFiles();
emit("upload", "", "", props.zIndex);
}
};
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
if (!imgSize) {
ElNotification({
title: "温馨提示",
message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: "warning"
});
return false;
}
if( props.fileType){
let fileType = props.fileType.replace(/\s/g, "");
fileType.split('.').join('|')
let fileIndex = rawFile.name.lastIndexOf('.')
let substrName = rawFile.name.substr(fileIndex)
if (fileType.indexOf(substrName)==-1) {
ElNotification({
title: "温馨提示",
message: "上传文件不符合所需的格式！",
type: "warning"
}); });
emit('upload', list, props.zIndex);
} else {
emit('upload', res.fileUrl, res.originalName, props.zIndex);
}
} catch (error) {
ElNotification({
title: '温馨提示',
message: '上传文件失败！',
type: 'error',
});
if (props.multiple) {
emit('upload', props.fileList, props.zIndex);
} else {
uploadRef.value!.clearFiles();
emit('upload', '', '', props.zIndex);
}
options.onError(error as any);
} finally {
loading.value = false;
}
};
const onPreview = (uploadFile: UploadFile) => {
window.open(uploadFile?.url);
};
const handleRemove: UploadProps['onRemove'] = (file: any) => {
if (props.multiple) {
emit(
'upload',
props.fileList.filter((f) => !(f === file.url)),
props.zIndex,
);
} else {
uploadRef.value!.clearFiles();
emit('upload', '', '', props.zIndex);
}
};
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
if (!imgSize) {
ElNotification({
title: '温馨提示',
message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: 'warning',
});
return false; return false;
} }
} if (props.fileType) {
return true; let fileType = props.fileType.replace(/\s/g, '');
}; fileType.split('.').join('|');
let fileIndex = rawFile.name.lastIndexOf('.');
let substrName = rawFile.name.substr(fileIndex);
if (fileType.indexOf(substrName) == -1) {
ElNotification({
title: '温馨提示',
message: '上传文件不符合所需的格式！',
type: 'warning',
});
return false;
}
}
return true;
};
</script> </script>
<style lang="scss"> <style lang="scss">
.success-file { .success-file {
.el-upload { .el-upload {
.el-upload-dragger { .el-upload-dragger {
border-width: 3px; border-width: 3px;
border-color: var(--el-color-success) !important; border-color: var(--el-color-success) !important;
}
} }
} }
}
.my-upload-file{ .my-upload-file {
.el-upload-dragger{ .el-upload-dragger {
padding: var(--el-upload-dragger-padding-vertical); padding: var(--el-upload-dragger-padding-vertical);
}
.el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to {
display: none;
}
.el-icon--close-tip {
display: none !important;
}
} }
.el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to{ .el-form-item.is-error {
display: none; .el-upload-dragger {
border-width: 3px;
border-color: var(--el-color-error) !important;
}
} }
.el-icon--close-tip{
display: none!important;
}
}
.el-form-item.is-error{
.el-upload-dragger {
border-width: 3px;
border-color: var(--el-color-error) !important;
}
}
</style> </style>

2
src/components/Upload/src/BasicUpload.vue
View File

@ -70,7 +70,7 @@
const showModal = ref(false); const showModal = ref(false);
const previewUrl = ref(''); const previewUrl = ref('');
const fileList = computed(() => { const fileList = computed(() => {
return props.list; return props.list;
}); });