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

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

@ -5,7 +5,7 @@
: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"
@ -14,8 +14,8 @@
: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">
@ -38,7 +38,7 @@
<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>
@ -61,18 +61,18 @@
: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）
@ -84,92 +84,92 @@ 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: '',
uploadFileUrl: '/admin/file/upload', uploadFileUrl: '/admin/file/upload',
drag: true, drag: true,
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
const uuid = ref('id-' + generateUUID()); 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);
// 获取 el-form 组件上下文 // 获取 el-form 组件上下文
const formContext = inject(formContextKey, void 0); const formContext = inject(formContextKey, void 0);
// 获取 el-form-item 组件上下文 // 获取 el-form-item 组件上下文
const formItemContext = inject(formItemContextKey, void 0); const formItemContext = inject(formItemContextKey, void 0);
// 判断是否禁用上传和删除 // 判断是否禁用上传和删除
const self_disabled = computed(() => { const self_disabled = computed(() => {
return props.disabled || formContext?.disabled; return props.disabled || formContext?.disabled;
}); });
/** /**
* @description 图片上传 * @description 图片上传
* @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();
@ -177,37 +177,37 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
img.src = this.result; img.src = this.result;
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);
}; };
/** /**
* @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)
@ -225,21 +225,21 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
}); });
}, 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) {
@ -249,8 +249,8 @@ const uploadError = () => {
} }
} }
} }
} }
:deep(.disabled) { :deep(.disabled) {
.el-upload, .el-upload,
.el-upload-dragger { .el-upload-dragger {
cursor: not-allowed !important; cursor: not-allowed !important;
@ -260,8 +260,8 @@ const uploadError = () => {
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;
@ -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 {
@ -361,5 +361,5 @@ const uploadError = () => {
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
} }
} }
</style> </style>

217
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,213 +20,227 @@
</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 {
.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-images { .my-upload-images {
.el-upload-dragger { .el-upload-dragger {
padding: var(--el-upload-dragger-padding-vertical); padding: var(--el-upload-dragger-padding-vertical);
} }
@ -239,24 +252,24 @@ const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
.el-icon--close-tip { .el-icon--close-tip {
display: none !important; display: none !important;
} }
} }
.el-form-item.is-error { .el-form-item.is-error {
.el-upload-dragger { .el-upload-dragger {
border-width: 3px; border-width: 3px;
border-color: var(--el-color-error) !important; border-color: var(--el-color-error) !important;
} }
} }
:deep(.el-upload-list__item){ :deep(.el-upload-list__item) {
transition: none !important; transition: none !important;
} }
.upload-box { .upload-box {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
>div { > div {
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
@ -316,5 +329,5 @@ const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
} }
} }
} }
} }
</style> </style>

98
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,31 +97,31 @@ 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();
const addImgLoading = ref(false); const addImgLoading = ref(false);
// 左旋转 // 左旋转
const rotateLeft = () => { const rotateLeft = () => {
cropperRef.value.rotateLeft(); cropperRef.value.rotateLeft();
}; };
// 右旋转 // 右旋转
const rotateRight = () => { const rotateRight = () => {
cropperRef.value.rotateRight(); cropperRef.value.rotateRight();
}; };
// 放大缩小 // 放大缩小
const changeScale = (num: any) => { const changeScale = (num: any) => {
num = num || 1; num = num || 1;
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;
@ -129,25 +129,25 @@ const dataURLtoFile=(dataurl:any, filename:any)=> {
while (len--) { while (len--) {
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({});
</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 {
@ -193,5 +193,5 @@ defineExpose({});
.cropper_btns { .cropper_btns {
margin-top: 20px; margin-top: 20px;
} }
} }
</style> </style>

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

@ -3,22 +3,22 @@
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"
@ -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);
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 {
loading.value = false; loading.value = false;
} }
}; };
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(
}else{ 'upload',
props.fileList.filter((f) => !(f === file.url)),
props.zIndex,
);
} else {
uploadRef.value!.clearFiles(); uploadRef.value!.clearFiles();
emit("upload", "", "", props.zIndex); emit('upload', '', '', props.zIndex);
} }
}; };
/** /**
* @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 {
.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{ .el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to {
display: none; display: none;
} }
.el-icon--close-tip{ .el-icon--close-tip {
display: none!important; display: none !important;
} }
} }
.el-form-item.is-error{ .el-form-item.is-error {
.el-upload-dragger { .el-upload-dragger {
border-width: 3px; border-width: 3px;
border-color: var(--el-color-error) !important; border-color: var(--el-color-error) !important;
} }
} }
</style> </style>