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"
@success="cropperSuccess"
:fileName="fileName"
></Cropper>
/>
</template>
<script setup lang="ts" name="UploadImg">
@ -69,8 +69,8 @@ import { ref, computed, inject } from 'vue';
import { ElNotification, formContextKey, formItemContextKey } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { generateUUID } from '@/utils/auth';
import {upload} from '@/api/common'
import Cropper from '@/components/Upload/cropper.vue'
import { upload } from '@/api/common';
import Cropper from '@/components/Upload/cropper.vue';
interface UploadFileProps {
imageUrl?: string; // 图片地址 ==> 必传
@ -84,11 +84,11 @@ interface UploadFileProps {
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
iconSize?: number;
name?: string;
cropper:Boolean,
cropperSize?:Object
cropper: Boolean;
cropperSize?: Object;
}
const cropperVisible=ref(false)
const cropperVisible = ref(false);
// 接受父组件参数
const props = withDefaults(defineProps<UploadFileProps>(), {
imageUrl: '',
@ -97,12 +97,12 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
disabled: false,
fileSize: 5,
fileType: () => ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
height: '150px',
width: '150px',
height: '120px',
width: '120px',
borderRadius: '8px',
name: '',
cropper: false,
cropperSize:null
cropperSize: null,
});
// 生成组件唯一id
@ -110,11 +110,11 @@ const uuid = ref('id-' + generateUUID());
const viewImg = () => {
if (props.imageUrl.indexOf('.pdf') < 0) {
imgViewVisible.value = true
imgViewVisible.value = true;
} else {
window.open(props.imageUrl)
}
window.open(props.imageUrl);
}
};
// 查看图片
const imgViewVisible = ref(false);
@ -132,44 +132,44 @@ const self_disabled = computed(() => {
* @param options upload 所有配置项
* */
interface UploadEmits {
(e: 'update:imageUrl', value: string): void,
(e: 'update:imageUrl', value: string): void;
(e: 'changeFileName', value: string): void;
}
const fileName=ref('')
const oImg=ref('')
const fileName = ref('');
const oImg = ref('');
const emit = defineEmits<UploadEmits>();
const loading=ref(false)
const progress=ref(0)
const loading = ref(false);
const progress = ref(0);
const cropperSuccess = (fileChile: any) => {
actionFile(fileChile)
}
actionFile(fileChile);
};
const actionFile = async (fileChild: any) => {
loading.value=true
loading.value = true;
try {
const formData = new FormData()
formData.append('file',fileChild)
formData.append('name',props.name)
const res =await upload(formData)
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)
emit('changeFileName', res.originalName);
// 调用 el-form 内部的校验方法（可自动校验）
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
} catch (error) {
emit('update:imageUrl', '');
emit('changeFileName','')
emit('changeFileName', '');
} finally {
progress.value=0
loading.value=false
}
progress.value = 0;
loading.value = false;
}
};
const handleHttpUploadOptions=ref({})
const handleHttpUploadOptions = ref({});
const handleHttpUpload = async (options: UploadRequestOptions) => {
handleHttpUploadOptions.value=options
handleHttpUploadOptions.value = options;
if (props.cropper) {
fileName.value= options.file.name
fileName.value = options.file.name;
let reader = new FileReader();
reader.readAsDataURL(options.file);
let img = new Image();
@ -178,13 +178,13 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
img.onload = function () {
let base = e.target.result;
oImg.value = base;
event.target.value = "";
event.target.value = '';
cropperVisible.value = true;
};
};
return
return;
}
actionFile(options.file)
actionFile(options.file);
};
/**
@ -192,7 +192,7 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
* */
const deleteImg = () => {
emit('update:imageUrl', '');
emit('changeFileName','')
emit('changeFileName', '');
};
/**
@ -305,8 +305,8 @@ const uploadError = () => {
border: 2px dashed var(--el-color-primary) !important;
}
.upload-image {
width: 100%;
height: 100%;
width: 90%;
height: 90%;
object-fit: contain;
}
.upload-empty {

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

@ -1,8 +1,7 @@
<template>
<div class="upload-box">
<div v-for="(item, index) in fileList" class="items">
<img v-if="item.filePath" :src="item.filePath"
class="upload-image" />
<img v-if="item.filePath" :src="item.filePath" class="upload-image" />
<div class="upload-handle" @click.stop>
<div class="handle-icon" @click="handleEdit(index)" v-if="!self_disabled">
<el-icon :size="props.iconSize">
@ -21,201 +20,215 @@
</div>
</div>
</div>
<el-upload action="#" :id="uuid" class="upload-demo my-upload-images"
: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-upload
action="#"
:id="uuid"
class="upload-demo my-upload-images"
: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">
<Plus />
</el-icon>
<el-progress type="circle" v-else :percentage="progress"></el-progress>
<el-progress type="circle" v-else :percentage="progress" />
</el-upload>
</div>
</template>
<script setup lang="ts">
import { computed,ref } from "vue";
import { ElNotification, UploadFile, UploadInstance } from "element-plus";
import type { UploadProps, UploadRequestOptions } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { generateUUID } from "@/utils/auth";
import { computed, ref } from 'vue';
import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { generateUUID } from '@/utils/auth';
const uploadRef = ref<UploadInstance>();
import {upload} from '@/api/common'
import { upload } from '@/api/common';
// 接受父组件参数
const props = defineProps({
zIndex: {
default: -1
default: -1,
},
multiple: {
type: Boolean,
default: false
default: false,
},
btnTip: {
type: String,
default: ''
default: '',
},
limit: {
type: Number,
default: undefined
default: undefined,
},
width: {
type: String,
default: '150px'
default: '150px',
},
height: {
type: String,
default: '150px'
default: '150px',
},
borderRadius: {
type: String,
default: '8px'
default: '8px',
},
fileList: {
type: Array,
required: true,
default: []
default: [],
},
disabled: {
default: false
default: false,
},
fileSize: {
default: 200
default: 200,
},
orderNo: {
default: ''
default: '',
},
fileType: {
default: ""
default: '',
},
name: {
default: ""
}
default: '',
},
});
// 生成组件唯一id
const uuid = ref("id-" + generateUUID());
const uuid = ref('id-' + generateUUID());
// 判断是否禁用上传和删除
const self_disabled = computed(() => {
return props.disabled;
});
let editIndex = ''
let editIndex = '';
const emit = defineEmits(["upload"]);
const progress = ref(0)
const emit = defineEmits(['upload']);
const progress = ref(0);
const loading = ref(false);
const handleHttpUpload = async (options: UploadRequestOptions) => {
loading.value = true;
try {
const formData = new FormData()
formData.append('file',options.file)
formData.append('name',props.name)
const res =await upload(formData)
const formData = new FormData();
formData.append('file', options.file);
formData.append('name', props.name);
const res = await upload(formData);
if (props.multiple) {
let list = JSON.parse(JSON.stringify(props.fileList))
let list = JSON.parse(JSON.stringify(props.fileList));
if (editIndex !== '') {
list.splice(editIndex, 1, {
url: res.fileUrl,
name: res.originalName,
filePath: res.fileUrl,
fileName: res.originalName
})
editIndex = ''
fileName: res.originalName,
});
editIndex = '';
} else {
list.push({
url: res.fileUrl,
name: res.originalName,
filePath: res.fileUrl,
fileName: res.originalName
})
fileName: res.originalName,
});
}
emit('upload', list,props.zIndex)
emit('upload', list, props.zIndex);
} else {
emit("upload", res, props.zIndex);
emit('upload', res, props.zIndex);
}
} catch (error) {
ElNotification({
title: "温馨提示",
message: "上传文件失败！",
type: "error"
title: '温馨提示',
message: '上传文件失败！',
type: 'error',
});
if (props.multiple) {
emit('upload', props.fileList,props.zIndex)
emit('upload', props.fileList, props.zIndex);
} else {
uploadRef.value!.clearFiles();
emit("upload", "", props.zIndex);
emit('upload', '', props.zIndex);
}
options.onError(error as any);
} finally {
progress.value = 0
progress.value = 0;
loading.value = false;
}
};
const onPreview = (index: any) => {
window.open(props.fileList[index].filePath)
}
window.open(props.fileList[index].filePath);
};
const handleEdit = (index: any) => {
editIndex = index
editIndex = index;
const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
dom && dom.dispatchEvent(new MouseEvent('click'));
}
};
const handleRemove = (index: any) => {
editIndex = index
editIndex = index;
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 {
uploadRef.value!.clearFiles();
emit("upload", "" ,props.zIndex);
emit('upload', '', props.zIndex);
}
};
const onExceed = () => {
if (props.limit) {
ElNotification({
title: "温馨提示",
title: '温馨提示',
message: `最多支持上传${props.limit}张`,
type: "warning"
type: 'warning',
});
}
};
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
if (!imgSize) {
ElNotification({
title: "温馨提示",
title: '温馨提示',
message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: "warning"
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)
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"
title: '温馨提示',
message: '上传文件不符合所需的格式！',
type: 'warning',
});
return false;
}
}
return true;
};
</script>
<style scoped lang="scss">
.success-file {

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

@ -9,7 +9,7 @@
:before-close="dialogClose"
>
<div class="cropper_content">
<div class="cropper" style="text-align: center;">
<div class="cropper" style="text-align: center">
<vueCropper
ref="cropperRef"
:img="options.img"
@ -25,11 +25,11 @@
:fixedBox="options.fixedBox"
:enlarge="options.enlarge"
:fixedNumber="options.fixedNumber"
></vueCropper>
/>
</div>
<div class="cropper_btns">
<el-button @click="rotateLeft" icon="RefreshLeft" size="mini" title="左旋转"></el-button>
<el-button @click="rotateRight" icon="RefreshRight" 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 @click="changeScale(1)" size="mini" title="放大">+</el-button>
<el-button @click="changeScale(-1)" size="mini" title="缩小">-</el-button>
</div>
@ -44,42 +44,42 @@
</template>
<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';
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false
default: false,
},
cropperSize: {
type: Object,
default() {
return null;
}
},
},
oImg: {
type: String,
default: ""
default: '',
},
fileName: {
type: String,
default: ""
default: '',
},
folder: {
type: String,
default: ""
}
default: '',
},
});
const dialogClose = () => {
emit("update:visible", false);
emit('update:visible', false);
};
const options = reactive({
img: props.oImg, // 裁剪图片的地址
outputSize: 1, // 裁剪生成图片的质量
outputType: "png", // 裁剪生成图片的格式
outputType: 'png', // 裁剪生成图片的格式
info: true, // 裁剪框的大小信息
canScale: true, // 图片是否允许滚动缩放
autoCrop: true, // 是否默认生成截图框
@ -97,7 +97,7 @@ const options = reactive({
infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
maximgSize: 100, // 限制图片最大宽度和高度
enlarge: 1, // 图片根据截图框输出比例倍数
mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)
mode: 'contain', // 图片默认渲染方式(contain, cover, 100px, 100% auto)
});
const cropperRef = ref();
@ -117,11 +117,11 @@ const changeScale = (num: any) => {
cropperRef.value.changeScale(num);
};
const emit = defineEmits(["success", "update:visible"]);
const emit = defineEmits(['success', 'update:visible']);
// base64转图片文件
const dataURLtoFile = (dataurl: any, filename: any) => {
let arr = dataurl.split(",");
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let len = bstr.length;
@ -130,15 +130,15 @@ const dataURLtoFile=(dataurl:any, filename:any)=> {
u8arr[len] = bstr.charCodeAt(len);
}
return new File([u8arr], filename, { type: mime });
}
};
const submit = () => {
cropperRef.value.getCropData(fileData => {
cropperRef.value.getCropData((fileData) => {
let file = dataURLtoFile(fileData, props.fileName);
emit("update:visible", false);
emit('success',file)
})
}
emit('update:visible', false);
emit('success', file);
});
};
// 暴露变量
defineExpose({});
@ -147,7 +147,7 @@ defineExpose({});
<style lang="scss">
.cropper_model_dlg {
.el-dialog__body {
padding: 0px 20px 60px !important
padding: 0px 20px 60px !important;
}
.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" />
<upload-filled v-else />
</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 #tip>
<template v-if="!isBtn">
<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>
</el-upload>
</template>
<script setup lang="ts">
import { computed,ref} from "vue";
import {ElNotification, UploadFile, UploadInstance} from "element-plus";
import type {UploadProps, UploadRequestOptions} from "element-plus";
import {generateUUID} from "@/utils/auth";
import { computed, ref } from 'vue';
import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { generateUUID } from '@/utils/auth';
const uploadRef = ref<UploadInstance>();
import {upload} from '@/api/common'
import { upload } from '@/api/common';
// 接受父组件参数
const props = defineProps({
zIndex: {
default: -1
default: -1,
},
multiple: {
type: Boolean,
default: false
default: false,
},
isBtn: {
type: Boolean,
default: false
default: false,
},
showFileList: {
type: Boolean,
default: true
default: true,
},
btnTip: {
type: String,
default: ''
default: '',
},
limit: {
type: Number,
default: undefined
default: undefined,
},
fileList: {
type: Array,
required: true,
default: []
default: [],
},
disabled: {
default: false
default: false,
},
fileSize: {
default: 200
default: 200,
},
orderNo: {
default: ''
default: '',
},
fileType: {
default: ""
default: '',
},
name: {
default: ""
}
default: '',
},
});
// 生成组件唯一id
const uuid = ref("id-" + generateUUID());
const uuid = ref('id-' + generateUUID());
// 判断是否禁用上传和删除
const self_disabled = computed(() => {
return props.disabled;
});
const emit = defineEmits(["upload"]);
const emit = defineEmits(['upload']);
const loading = ref(false);
const handleHttpUpload = async (options: UploadRequestOptions) => {
loading.value = true;
try {
const formData = new FormData()
formData.append('file',options.file)
formData.append('name',props.name)
const res =await upload(formData)
const formData = new FormData();
formData.append('file', options.file);
formData.append('name', props.name);
const res = await upload(formData);
if (props.multiple) {
let list=JSON.parse(JSON.stringify(props.fileList))
let list = JSON.parse(JSON.stringify(props.fileList));
list.push({
url: res.fileUrl,
name: res.originalName,
filePath: res.fileUrl,
fileName: res.originalName,
})
emit('upload', list,props.zIndex)
});
emit('upload', list, props.zIndex);
} else {
emit("upload", res.fileUrl,res.originalName,props.zIndex);
emit('upload', res.fileUrl, res.originalName, props.zIndex);
}
} catch (error) {
ElNotification({
title: "温馨提示",
message: "上传文件失败！",
type: "error"
title: '温馨提示',
message: '上传文件失败！',
type: 'error',
});
if (props.multiple) {
emit('upload', props.fileList,props.zIndex)
emit('upload', props.fileList, props.zIndex);
} else {
uploadRef.value!.clearFiles();
emit("upload", "", "",props.zIndex);
emit('upload', '', '', props.zIndex);
}
options.onError(error as any);
} finally {
@ -151,15 +153,19 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
};
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) {
emit("upload",props.fileList.filter((f) => !(f === file.url)),props.zIndex)
emit(
'upload',
props.fileList.filter((f) => !(f === file.url)),
props.zIndex,
);
} else {
uploadRef.value!.clearFiles();
emit("upload", "", "", props.zIndex);
emit('upload', '', '', props.zIndex);
}
};
@ -167,34 +173,32 @@ const handleRemove: UploadProps["onRemove"] = (file:any) => {
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
if (!imgSize) {
ElNotification({
title: "温馨提示",
title: '温馨提示',
message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: "warning"
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)
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"
title: '温馨提示',
message: '上传文件不符合所需的格式！',
type: 'warning',
});
return false;
}
}
return true;
};
</script>
<style lang="scss">
.success-file {