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

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

@ -61,7 +61,7 @@
: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">
@ -69,8 +69,8 @@ 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; // 图片地址 ==> 必传
@ -84,11 +84,11 @@ interface UploadFileProps {
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 cropperVisible = ref(false);
// 接受父组件参数 // 接受父组件参数
const props = withDefaults(defineProps<UploadFileProps>(), { const props = withDefaults(defineProps<UploadFileProps>(), {
imageUrl: '', imageUrl: '',
@ -97,12 +97,12 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
disabled: false, disabled: false,
fileSize: 5, fileSize: 5,
fileType: () => ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'], fileType: () => ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
height: '150px', height: '120px',
width: '150px', width: '120px',
borderRadius: '8px', borderRadius: '8px',
name: '', name: '',
cropper: false, cropper: false,
cropperSize:null cropperSize: null,
}); });
// 生成组件唯一id // 生成组件唯一id
@ -110,11 +110,11 @@ const uuid = ref('id-' + generateUUID());
const viewImg = () => { const viewImg = () => {
if (props.imageUrl.indexOf('.pdf') < 0) { if (props.imageUrl.indexOf('.pdf') < 0) {
imgViewVisible.value = true imgViewVisible.value = true;
} else { } else {
window.open(props.imageUrl) window.open(props.imageUrl);
}
} }
};
// 查看图片 // 查看图片
const imgViewVisible = ref(false); const imgViewVisible = ref(false);
@ -132,44 +132,44 @@ const self_disabled = computed(() => {
* @param options upload 所有配置项 * @param options upload 所有配置项
* */ * */
interface UploadEmits { interface UploadEmits {
(e: 'update:imageUrl', value: string): void, (e: 'update:imageUrl', value: string): void;
(e: 'changeFileName', value: string): void; (e: 'changeFileName', value: string): void;
} }
const fileName=ref('') const fileName = ref('');
const oImg=ref('') const oImg = ref('');
const emit = defineEmits<UploadEmits>(); const emit = defineEmits<UploadEmits>();
const loading=ref(false) const loading = ref(false);
const progress=ref(0) const progress = ref(0);
const cropperSuccess = (fileChile: any) => { const cropperSuccess = (fileChile: any) => {
actionFile(fileChile) actionFile(fileChile);
} };
const actionFile = async (fileChild: any) => { const actionFile = async (fileChild: any) => {
loading.value=true loading.value = true;
try { try {
const formData = new FormData() const formData = new FormData();
formData.append('file',fileChild) formData.append('file', fileChild);
formData.append('name',props.name) formData.append('name', props.name);
const res =await upload(formData) const res = await upload(formData);
emit('update:imageUrl', res.fileUrl); emit('update:imageUrl', res.fileUrl);
emit('changeFileName',res.originalName) emit('changeFileName', res.originalName);
// 调用 el-form 内部的校验方法（可自动校验） // 调用 el-form 内部的校验方法（可自动校验）
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]); formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
} catch (error) { } catch (error) {
emit('update:imageUrl', ''); emit('update:imageUrl', '');
emit('changeFileName','') emit('changeFileName', '');
} finally { } finally {
progress.value=0 progress.value = 0;
loading.value=false loading.value = false;
}
} }
};
const handleHttpUploadOptions=ref({}) const handleHttpUploadOptions = ref({});
const handleHttpUpload = async (options: UploadRequestOptions) => { const handleHttpUpload = async (options: UploadRequestOptions) => {
handleHttpUploadOptions.value=options handleHttpUploadOptions.value = options;
if (props.cropper) { if (props.cropper) {
fileName.value= options.file.name fileName.value = options.file.name;
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(options.file); reader.readAsDataURL(options.file);
let img = new Image(); let img = new Image();
@ -178,13 +178,13 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
img.onload = function () { img.onload = function () {
let base = e.target.result; let base = e.target.result;
oImg.value = base; oImg.value = base;
event.target.value = ""; event.target.value = '';
cropperVisible.value = true; cropperVisible.value = true;
}; };
}; };
return return;
} }
actionFile(options.file) actionFile(options.file);
}; };
/** /**
@ -192,7 +192,7 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
* */ * */
const deleteImg = () => { const deleteImg = () => {
emit('update:imageUrl', ''); emit('update:imageUrl', '');
emit('changeFileName','') emit('changeFileName', '');
}; };
/** /**
@ -305,8 +305,8 @@ const uploadError = () => {
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 {

157
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,201 +20,215 @@
</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 { } else {
list.push({ list.push({
url: res.fileUrl, url: res.fileUrl,
name: res.originalName, name: res.originalName,
filePath: res.fileUrl, filePath: res.fileUrl,
fileName: res.originalName fileName: res.originalName,
}) });
} }
emit('upload', list,props.zIndex) emit('upload', list, props.zIndex);
} else { } else {
emit("upload", res, props.zIndex); emit('upload', res, props.zIndex);
} }
} catch (error) { } catch (error) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: "上传文件失败！", message: '上传文件失败！',
type: "error" type: 'error',
}); });
if (props.multiple) { if (props.multiple) {
emit('upload', props.fileList,props.zIndex) emit('upload', props.fileList, props.zIndex);
} else { } else {
uploadRef.value!.clearFiles(); uploadRef.value!.clearFiles();
emit("upload", "", props.zIndex); emit('upload', '', props.zIndex);
} }
options.onError(error as any); options.onError(error as any);
} finally { } finally {
progress.value = 0 progress.value = 0;
loading.value = false; loading.value = false;
} }
}; };
const onPreview = (index: any) => { const onPreview = (index: any) => {
window.open(props.fileList[index].filePath) window.open(props.fileList[index].filePath);
} };
const handleEdit = (index: any) => { const handleEdit = (index: any) => {
editIndex = index editIndex = index;
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'));
} };
const handleRemove = (index: any) => { const handleRemove = (index: any) => {
editIndex = index editIndex = index;
if (props.multiple) { if (props.multiple) {
emit("upload", props.fileList.filter((f, i) => !(editIndex == i)),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);
} }
}; };
const onExceed = () => { const onExceed = () => {
if (props.limit) { if (props.limit) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: `最多支持上传${props.limit}张`, message: `最多支持上传${props.limit}张`,
type: "warning" type: 'warning',
}); });
} }
}; };
/** /**
* @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;
if (!imgSize) { if (!imgSize) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: `上传文件大小不能超过 ${props.fileSize}M！`, message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: "warning" type: 'warning',
}); });
return false; return false;
} }
if (props.fileType) { if (props.fileType) {
let fileType = props.fileType.replace(/\s/g, ""); let fileType = props.fileType.replace(/\s/g, '');
fileType.split('.').join('|') fileType.split('.').join('|');
let fileIndex = rawFile.name.lastIndexOf('.') let fileIndex = rawFile.name.lastIndexOf('.');
let substrName = rawFile.name.substr(fileIndex) let substrName = rawFile.name.substr(fileIndex);
if (fileType.indexOf(substrName) == -1) { if (fileType.indexOf(substrName) == -1) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: "上传文件不符合所需的格式！", message: '上传文件不符合所需的格式！',
type: "warning" type: 'warning',
}); });
return false; return false;
} }
} }
return true; return true;
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.success-file { .success-file {

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

@ -9,7 +9,7 @@
: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"
@ -25,11 +25,11 @@
: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,42 +44,42 @@
</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: { oImg: {
type: String, type: String,
default: "" default: '',
}, },
fileName: { fileName: {
type: String, type: String,
default: "" default: '',
}, },
folder: { folder: {
type: String, type: String,
default: "" default: '',
} },
}); });
const dialogClose = () => { const dialogClose = () => {
emit("update:visible", false); emit('update:visible', false);
}; };
const options = reactive({ const options = reactive({
img: props.oImg, // 裁剪图片的地址 img: props.oImg, // 裁剪图片的地址
outputSize: 1, // 裁剪生成图片的质量 outputSize: 1, // 裁剪生成图片的质量
outputType: "png", // 裁剪生成图片的格式 outputType: 'png', // 裁剪生成图片的格式
info: true, // 裁剪框的大小信息 info: true, // 裁剪框的大小信息
canScale: true, // 图片是否允许滚动缩放 canScale: true, // 图片是否允许滚动缩放
autoCrop: true, // 是否默认生成截图框 autoCrop: true, // 是否默认生成截图框
@ -97,7 +97,7 @@ const options = reactive({
infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高 infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
maximgSize: 100, // 限制图片最大宽度和高度 maximgSize: 100, // 限制图片最大宽度和高度
enlarge: 1, // 图片根据截图框输出比例倍数 enlarge: 1, // 图片根据截图框输出比例倍数
mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto) mode: 'contain', // 图片默认渲染方式(contain, cover, 100px, 100% auto)
}); });
const cropperRef = ref(); const cropperRef = ref();
@ -117,11 +117,11 @@ const changeScale = (num: any) => {
cropperRef.value.changeScale(num); cropperRef.value.changeScale(num);
}; };
const emit = defineEmits(["success", "update:visible"]); const emit = defineEmits(['success', 'update:visible']);
// base64转图片文件 // base64转图片文件
const dataURLtoFile = (dataurl: any, filename: any) => { const dataURLtoFile = (dataurl: any, filename: any) => {
let arr = dataurl.split(","); let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1]; let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]); let bstr = atob(arr[1]);
let len = bstr.length; let len = bstr.length;
@ -130,15 +130,15 @@ const dataURLtoFile=(dataurl:any, filename:any)=> {
u8arr[len] = bstr.charCodeAt(len); u8arr[len] = bstr.charCodeAt(len);
} }
return new File([u8arr], filename, { type: mime }); return new File([u8arr], filename, { type: mime });
} };
const submit = () => { const submit = () => {
cropperRef.value.getCropData(fileData => { cropperRef.value.getCropData((fileData) => {
let file = dataURLtoFile(fileData, props.fileName); let file = dataURLtoFile(fileData, props.fileName);
emit("update:visible", false); emit('update:visible', false);
emit('success',file) emit('success', file);
}) });
} };
// 暴露变量 // 暴露变量
defineExpose({}); defineExpose({});
@ -147,7 +147,7 @@ defineExpose({});
<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 {

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

@ -33,116 +33,118 @@
<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 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));
list.push({ list.push({
url: res.fileUrl, url: res.fileUrl,
name: res.originalName, name: res.originalName,
filePath: res.fileUrl, filePath: res.fileUrl,
fileName: res.originalName, fileName: res.originalName,
}) });
emit('upload', list,props.zIndex) emit('upload', list, props.zIndex);
} else { } else {
emit("upload", res.fileUrl,res.originalName,props.zIndex); emit('upload', res.fileUrl, res.originalName, props.zIndex);
} }
} catch (error) { } catch (error) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: "上传文件失败！", message: '上传文件失败！',
type: "error" type: 'error',
}); });
if (props.multiple) { if (props.multiple) {
emit('upload', props.fileList,props.zIndex) emit('upload', props.fileList, props.zIndex);
} else { } else {
uploadRef.value!.clearFiles(); uploadRef.value!.clearFiles();
emit("upload", "", "",props.zIndex); emit('upload', '', '', props.zIndex);
} }
options.onError(error as any); options.onError(error as any);
} finally { } finally {
@ -151,15 +153,19 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
}; };
const onPreview = (uploadFile: UploadFile) => { const onPreview = (uploadFile: UploadFile) => {
window.open( uploadFile?.url) window.open(uploadFile?.url);
} };
const handleRemove: UploadProps["onRemove"] = (file:any) => { const handleRemove: UploadProps['onRemove'] = (file: any) => {
if (props.multiple) { if (props.multiple) {
emit("upload",props.fileList.filter((f) => !(f === file.url)),props.zIndex) emit(
'upload',
props.fileList.filter((f) => !(f === file.url)),
props.zIndex,
);
} else { } else {
uploadRef.value!.clearFiles(); uploadRef.value!.clearFiles();
emit("upload", "", "", props.zIndex); emit('upload', '', '', props.zIndex);
} }
}; };
@ -167,34 +173,32 @@ const handleRemove: UploadProps["onRemove"] = (file:any) => {
* @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;
if (!imgSize) { if (!imgSize) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: `上传文件大小不能超过 ${props.fileSize}M！`, message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: "warning" type: 'warning',
}); });
return false; return false;
} }
if (props.fileType) { if (props.fileType) {
let fileType = props.fileType.replace(/\s/g, ""); let fileType = props.fileType.replace(/\s/g, '');
fileType.split('.').join('|') fileType.split('.').join('|');
let fileIndex = rawFile.name.lastIndexOf('.') let fileIndex = rawFile.name.lastIndexOf('.');
let substrName = rawFile.name.substr(fileIndex) let substrName = rawFile.name.substr(fileIndex);
if (fileType.indexOf(substrName) == -1) { if (fileType.indexOf(substrName) == -1) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: "上传文件不符合所需的格式！", message: '上传文件不符合所需的格式！',
type: "warning" type: 'warning',
}); });
return false; return false;
} }
} }
return true; return true;
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.success-file { .success-file {