mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
✨ Introducing new features. 优化图片和文件上传,支持v-model绑定
This commit is contained in:
parent
1a436bb80d
commit
bbb488b9bf
@ -5,7 +5,7 @@
|
||||
<el-upload ref="fileUpload" class="avatar-uploader" :action="props.uploadFileUrl" :show-file-list="false"
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers" :limit="props.limit">
|
||||
<slot>
|
||||
123<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
@ -22,10 +22,10 @@ import { watch } from "vue";
|
||||
|
||||
const imageUrl = ref('')
|
||||
const fileUpload = ref()
|
||||
const emit = defineEmits(['update:value', 'change']);
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const props = defineProps({
|
||||
value: [String, Array],
|
||||
modelValue: [String, Array],
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
@ -41,7 +41,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.value, (val) => {
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val) {
|
||||
imageUrl.value = val
|
||||
}
|
||||
@ -52,7 +52,7 @@ const handleAvatarSuccess = (res, file) => {
|
||||
if (res.code === 0) {
|
||||
imageUrl.value = res.data.url
|
||||
emit("change", imageUrl.value);
|
||||
emit("update:value", imageUrl.value);
|
||||
emit("update:modelValue", imageUrl.value);
|
||||
} else {
|
||||
fileUpload.value.handleRemove(file);
|
||||
}
|
||||
|
@ -1,9 +1,15 @@
|
||||
<!--文件上传组件-->
|
||||
<template>
|
||||
<div class="upload-file">
|
||||
<el-upload multiple :action="props.uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList"
|
||||
:limit="limit" :on-error="handleUploadError" :on-success="handleUploadSuccess" :on-remove="handleRemove"
|
||||
:headers="headers" class="upload-file-uploader" ref="fileUpload" :auto-upload="false" drag>
|
||||
<el-upload ref="fileUpload"
|
||||
:action="props.uploadFileUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleUploadSuccess" class="upload-file-uploader" drag multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处,或
|
||||
@ -12,8 +18,9 @@
|
||||
<template #tip>
|
||||
<div class="el-upload__tip" v-if="props.isShowTip">
|
||||
请上传
|
||||
<template v-if="props.fileSize"> 大小不超过 <b style="color: #f56c6c">{{ props.fileSize }}MB</b> </template>
|
||||
<template v-if="props.fileType"> 格式为 <b style="color: #f56c6c">{{ props.fileType.join("/") }}</b> </template>
|
||||
<template v-if="props.fileSize"> 大小不超过 <b style="color: #f56c6c">{{ props.fileSize }}MB</b></template>
|
||||
<template v-if="props.fileType"> 格式为 <b style="color: #f56c6c">{{ props.fileType.join("/") }}</b>
|
||||
</template>
|
||||
的文件
|
||||
</div>
|
||||
</template>
|
||||
@ -22,8 +29,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="upload-file">
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { Local, Session } from "/@/utils/storage";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {Local, Session} from "/@/utils/storage";
|
||||
|
||||
const props = defineProps({
|
||||
value: [String, Array],
|
||||
@ -113,6 +120,7 @@ const uploadedSuccessfully = () => {
|
||||
uploadList.value = [];
|
||||
number.value = 0;
|
||||
emit("change", listToString(fileList.value));
|
||||
emit("update:modelValue", listToString(fileList.value));
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,7 +149,7 @@ watch(() => props.value, val => {
|
||||
if (val) {
|
||||
let temp = 1;
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : props.value.split(',');
|
||||
const list = Array.isArray(val) ? val : props?.value?.split(',');
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map(item => {
|
||||
if (typeof item === "string") {
|
||||
|
Loading…
Reference in New Issue
Block a user