|
@@ -0,0 +1,138 @@
|
|
|
+<template>
|
|
|
+ <div class="upload">
|
|
|
+ <el-upload v-model:file-list="fileList" :class="{hide:fileList.length>=limit}" :accept="accept" list-type="picture-card" :limit="limit" :multiple="multiple" :headers="headers" :before-upload="beforeAvatarUpload" :action="uploadUrl" :on-success="updateImg" :on-preview="handlePictureCardPreview" :on-remove="updateImg">
|
|
|
+ <el-icon>
|
|
|
+ <ele-Plus />
|
|
|
+ </el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog v-model="dialogVisible">
|
|
|
+ <img class="preview" :src="dialogImageUrl" alt="Preview Image" />
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 上传单张图片 -->
|
|
|
+ <!-- <uploadVue @set-img="youImg=$event" ></uploadVue> -->
|
|
|
+
|
|
|
+ <!-- 上传多长图片 需增加limit属性,设定图片最多张数 -->
|
|
|
+ <!-- <uploadVue @set-imgs="youImgs=$event" :limit="2"></uploadVue> -->
|
|
|
+
|
|
|
+ <!-- 上传单张图片,可以恢复表单图片显示 -->
|
|
|
+ <!-- <uploadVue img="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" @set-img="youImg=$event"></uploadVue> -->
|
|
|
+
|
|
|
+ <!-- 上传多张图片,可以恢复表单图片显示 需增加limit属性,设定图片最多张数 -->
|
|
|
+ <!-- <uploadVue :imgs="['https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png']" @set-imgs="youImgs=$event" :limit="2"></uploadVue> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, PropType, watch } from 'vue';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+import type { UploadProps } from 'element-plus';
|
|
|
+
|
|
|
+const uploadUrl: string = import.meta.env.VITE_API_URL + '/common/singleImg';
|
|
|
+
|
|
|
+const headers = {
|
|
|
+ Authorization: 'Bearer ' + JSON.parse(sessionStorage.token),
|
|
|
+};
|
|
|
+
|
|
|
+const emit = defineEmits(['setImg', 'setImgs']);
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ accept: {
|
|
|
+ type: String,
|
|
|
+ default: '.jpg,.png,.jpeg,.gif',
|
|
|
+ },
|
|
|
+ limit: {
|
|
|
+ type: Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ imgs: {
|
|
|
+ type: Array as PropType<string[]>,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ img: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const fileList = ref<any[]>([
|
|
|
+ // {
|
|
|
+ // name: '',
|
|
|
+ // url: '',
|
|
|
+ // },
|
|
|
+]);
|
|
|
+
|
|
|
+const updateImg = () => {
|
|
|
+ const list = fileList.value.map((item) => {
|
|
|
+ if (item.response) {
|
|
|
+ return import.meta.env.VITE_IMG_URL + item.response?.data?.path;
|
|
|
+ // return item.response?.data?.path;
|
|
|
+ } else {
|
|
|
+ return item.url;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (props.limit === 1) {
|
|
|
+ emit('setImg', list[0]);
|
|
|
+ } else {
|
|
|
+ emit('setImgs', list);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 如果传入图片输入,设置图片显示
|
|
|
+watch(
|
|
|
+ () => props.imgs,
|
|
|
+ (imgs) => {
|
|
|
+ if (imgs.length) {
|
|
|
+ fileList.value = imgs.map((url) => ({ name: url, url }));
|
|
|
+ updateImg();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
+
|
|
|
+// 传入单独图片,设置图片显示
|
|
|
+watch(
|
|
|
+ () => props.img,
|
|
|
+ (img) => {
|
|
|
+ if (img) {
|
|
|
+ fileList.value = [{ name: img, url: img }];
|
|
|
+ updateImg();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
+
|
|
|
+const dialogImageUrl = ref('');
|
|
|
+const dialogVisible = ref(false);
|
|
|
+
|
|
|
+const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
|
+ dialogImageUrl.value = uploadFile.url!;
|
|
|
+ dialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
+ if (rawFile.size / 1024 / 1024 > 2) {
|
|
|
+ ElMessage.error('图片不能超过2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.hide ::v-deep(.el-upload--picture-card) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.preview {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 60vh;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+</style>
|